Angular Material


Angular Material

 Material Design

What is


 Material Design

Polymer + Material Design

Google I/O - Summer 2014

Topeka SPA

Polymer Component Development

Material Design Paper Elements



Polymer + Material Design

Meet the 

Angular Material


Angular Material


Angular Material





Data Binding

Standard Directives

Animations & Effects

Data-aware Components

Rich UI components


Component Services


Ink & UX Effects

ARIA support

CSS layout


SDK, Docs, Demos

AngularJS Material Design

Open-Source Library

Live, Online Docs

AngularJS Material Design

Live, Online Docs

API Documentation

Embedded Demos

Demo Source Code

Links to Specifications

Links to GitHub Repos



Support for Screen Readers

Keyboard Navigation

Focus Support


Accessibility for Rich Internet Apps

... supported within each Angular Material component

CSS Layouts

Why create a Layout system for Angular Material ?


  • Flexbox-based CSS
  • Abstracts FlexBox Complexity to Attributes
  • CSS Attribute Selectors (not directives)


  • Horizontal and Vertical layouts
  • Mobile-first responsive design
  • Multiple Viewport Sizes

Grid and Alignment

Easy element alignments & layouts

  • Elements evenly take up space (flex)
  • Set specific sizes for each breakpoint
  • Easily align layout child elements


  • Sticky headers/footers
  • Vertically center


Beta in Q4, 2014

Angular Material

What's Next

Grids, Select, Menu, Chips, and more...

Better Swipe, Drag, and Panning

Improved Documentation

Improved Animations

More Samples


Sample Application demonstrates complex component interactions.

Community Participation

  • Source, Issues, and Milestones on GitHub
  • Experiment with the Components
  • File an issue
    • Clear details of the problem
    • Provide a Plunkr/CodePen sample
    • Provide a snapshot of screen 
  • Tell your friends...

Angular Material

Useful Links 

Bower Library


Angular Material

Material Specification

Online Docs

Thomas Burleson

Team Lead, Angular Material

Max Lynch

CEO, Ionic Framework





Introducing Angular Material Design

By Thomas Burleson

Introducing Angular Material Design

Let us introduce you to Angular Material Design. We will review the reasoning behind its implementation, demonstrate its features, and discuss how Angular Material will prove useful and important to your SPA development.

  • 42,501
Loading comments...

More from Thomas Burleson