Webmasters Gallery

The Angular Material project integrates Google’s Material Design with the AngularJS MVC framework and offers web engineers(especially AngularJS devs) a solid foundation of tools.

Google’s Design project is a system of tools for prototyping both web and native applications. From this Google created Material Design, a framework centered around design-driven principles.

Material Design was eventually adapted to work with AngularJS, thus marking the creation of angular-material. Throughout this article I’m going to talk further about different aspects of the angular-material project and show you how well it integrates these 2 platforms together.

Harnessing the Power of Angular-Material

When dealing with headings and other typography related styles, Angular-Material offers css classes for you to use. Much of the true power of Angular-Material is accessed through custom components that allow you to control every aspect of an Angular application.

These components come in the form of directives and attributes, and offer a broad range of functionality.

The Layout Attribute

Angular-material utilizes several variations of the layout attribute to style web applications. In the same way that BootStrap uses classes, Angular-Material uses custom attributes to define your applications layout.

Material Design utilizes flexbox, therefore Angular-Material provides the flex attribute for developers to use. Due to its recent struggles with browser support, many are unaware of the inherent control flexbox gives to developers.

Nonetheless Angular-Material’s flex attribute can take a value, though it does not necessarily have to.

Let’s take a look at a bit of code in an example from the Angular-Material website. It gives you a bit of insight as to how the flex attributes work.

<div layout="row">
  <div flex="66" flex-sm="33">
  This is the first div!
  </div>
  <div flex="33" flex-sm="66">
  This is the second div!
  </div>
</div>

The first div tag would flex to one-third of the space on mobile, and two-thirds on other devices, and the second div expands to two-thirds of the space on mobile, and one-third on other devices.

Functionality Through Different Directives

The flex attribute is just one of the many things that Angular-Material offers.

The framework also makes great use of directives that make tons of different thing possible. For example, Angular-Material provides directives such as md-autocomplete which a will query through a data set depending on a user’s input. Angular-Material will perform this query in realtime, thus providing a the best possible experience for the user.

Among the other directives Angular-Material offers out of the box is md-grid-list. This directive allows you to define complex grids layout and gives the developer a great deal control over what is displayed inside an angular app.

The md-grid-list directive takes different attributes such as md-cols and md-row-height. This directive allows you to define highly complex layouts that are fully responsive, which you can see for yourself in this demo.

The angular-material framework gives you all the tools you need to create highly functional web applications that provide users with a great design & experience. Now that you have some background of the framework, I encourage you to experiment as it is truly a web developer’s best friend.