Peter Morlion logo


ngEurope: Angular Material

The Material design language is Google’s design language for Android apps, presented at Google I/O last summer.

On a side note: if you take a look at some screenshots, you might say this has been inspired/copied from the Metro design language, with it’s clean and modern look and feel. And you could be right. Personally, I couldn’t care less. Companies and people copy from each other and are inspired by each other. Buy me a beer and we would have an animated (though polite) discussion 🙂

Of course, you could use these principles on other platforms (web, desktop, or even other mobile platforms), but it makes most sense on Android. Angular Material is the library you can use to leverage these principles in your Angular app. This makes it possible to use Angular to create an Android app, instead of the traditional Java-based approach.

This means Angular is now entering full steam into UI-country. Where most people will still think of Angular as an MV*-framework, it’s actually much more than that. It’s a fully-fledged front-end framework.

Personally, I find this an exciting evolution and I hope (and believe) Google will put their weight behind this. As Android is becoming for mobile what Windows has been for PCs, I would prefer to develop in HTML and javascript instead of Java (just personal preference).

There’s lots to discover in Angular Material, so be sure to check out the demos. There are some things that stand out though:

  •  ng-subheader: subheaders that scroll up while you scroll, but are easily replace by the next subheader as you continue scrolling. Not-so-trivial to implement yourself!
  • tabs can be static or dynamically built, can be paged, can be controlled by the keyboard and are data-bindable
  • progressbars: lots of different kinds, no css for you anymore
  • forms: floating labels are a neat little usability feature (check out the link and empty one of the fields, then unfocus the element)
  • containers, flexbox, gutters, row layout, vertical alignment: it’s all taken care of for you
  • last but definitely not least: ARIA. Accessibility is something that will have to get more and more attention as the web grows to be a bigger part of our lives.All this is themeable and they’re working hard on gesture based interactions, improved documentation, more animations and more samples.

At the moment of ngEurope, version 0.4 was out and any time now version 0.5 should come out. Starting with 0.5, they don’t expect any more breaking changes. Beta 1 should be out before Q4 ends.

It’s all open source and available on GitHub, Bower, or just

Leave a Reply

Your email address will not be published. Required fields are marked *