Angular in a Material World

Interested in AngularJS and Material Design? Then you really need to check out Angular Material. I recently gave a presentation on Angular Material at Omaha's AngularJS meetup ng-nebraska. Read on to see what I thought or check out the presentation here.

1. Material Design

  • Unveiled at Google IO 2014
  • Google's new design for Android and web applications
  • Set of design principles for applications based on physical principles of paper and ink combined with science and technology.


Basic principles of Material Design


The material environment is a 3D space, which means all objects have x, y, and z dimensions.

Material Properties

Material has varying x & y dimensions with a uniform thickness (1dp).

Elevation & Shadows

Shadows result naturally from the realtive elevation between material elements.

2. Angular Material

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.


  • Browser Support (n-1)
  • Angular 1.3.x or higher
  • Pre 1.0
  • 1.0 targeted for early fall
  • Themes
  • Grid (flexbox)
  • Input Elements
  • Accessibility
  • Touch support
Where do I start?
Review flexbox

Review flexbox b/c angular material's grid system is based on it.

Nice guide

Angular Gulp Generator

Yeoman generator that will bootstrap an app for you with Angular Material.


3. Examples

We are going to setup angular material app for viewing and submitting talk proposals.

  • Generator
  • Navigation
  • Font Icons
  • Lists & Forms
  • Themes
  • Accessibility

code on github

4. Lessons Learned

  • Supported by google
  • Uses Flexbox
  • Pretty
  • Provides Material Design for the web
  • Not Bootstrap :)
  • Not quite ready yet (pre 1.0 & performance issues)
  • Still missing a few things...maybe (datepicker just landed)
  • Some widgets (directives) don't play well together (toolbar & tabs)
  • Missing some documentation (styling, options, services)