Hello, Angular Material!

Let me tell you about the first time I used Angular Material.

I was just about to put myself on the line. I looked over at Scott Moss and whispered “Why don’t we just skip the static comps and do the entire thing in Angular Material?” to which he replied “I know, right!”.

I raised my hand and politely asked, “Would it be alright if we skipped doing static comps and just did the entire thing as a working proof of concept?” The response was golden.

“Uh… yeah. Sure. If you think you can do that”

Scott and I were participating in an in-house hackathon and the goal was to produce proof of concept where we could click through some basic static comps to illustrate a basic workflow. We were going to skip all that and build a working prototype instead with Angular Material and I had no real experience with it. The experience was 10x better than my expectations; the result was 10x better than the expectations of the entire team.

In two days, Scott and I had built out an entire working prototype that did extremely well in user testing and the concept eventually went into production.

That is when I fell in love with Angular Material here are the top 5 reasons that I believe it is one of the most significant tools that an Angular developer can have in their toolbox.

1. Material Design

If we are going to talk about Angular Material, we first have to discuss Material Design. Material Design is the soul and personality of Angular Material and Angular Material is the amazing execution of that vision. All my additional points are rooted in the principles put forth by Material Design.

Material Design is a powerful specification created by Google that facilitates a consistent experience across multiple devices regardless of form factor or input method. To achieve this goal, Angular Material implemented an incredibly intuitive and easy layout system. Material Design is also based on a collection of principles that come together to produce a rich and compelling visual experience for the user.

The goal of Material Design was to provide an experience where the UI elements provided a tactile reality in how they were layered and styled. There is a subtle sense of dimension when working with Material Design that indicates intent and relation. If you were to look at a material interface and conclude that it was almost like looking at paper elements stack on top of each other, you would be correct. This is intentional. To reinforce the concept of intention, every motion within Material Design is to convey meaning and clarify context within the application. The net sum of these principles is a foundation in which creating beautiful interfaces is the default.

2. Layout

CSS layout is historically notable as the foremost cause of countries going to war, mental health issues, and countless physical confrontations between humans and technological devices. Angular Material has redeemed the sins of our CSS patriarchs by making layout simple. At some point or another, we have all Googled “How to layout two divs side by side” and eventually “How to center element vertically in CSS”.

Because Angular Material is based on CSS flexbox, solving these historically perplexing questions can be achieved in just a few lines of HTML.

Allow me to start with the chore of laying out two elements side by side in HTML. Create a div with a layout attribute set to row and then two (or N really) child elements with a flex attribute on them.

<div layout="row">
<div flex>First item in row</div>
<div flex>Second item in row</div>
</div>

And done! It was just that easy. But what if we want the first child to take just a portion of the page because it is navigation and the second child to take up the rest? Just add a number value to the flex attribute and that is the percentage of the available layout that that element will fill. Easy mode.

<div layout="row">
<div flex="20">
    First Half
  </div>
<div flex>
    Second Half
  </div>
</div>

Responsive Layout

And what about responsive layout? There is an entire set of layout options available to accommodate responsive layout.

For instance, what if we had two child elements that we wanted to live side by side unless we were on a mobile device and then we wanted them to stack. All we would need to do in this case is add an attribute calling out the layout for the small form factor. In this case, we shift from a row layout to a column layout by adding layout-sm=”column” to our parent container.

<div layout="row" layout-sm="column">
<div flex>
    I'm above on mobile, and to the left on larger devices.
  </div>
<div flex>
    I'm below on mobile, and to the right on larger devices.
  </div>
</div>

Child Alignment

And this is the part of the post where I start to break down and weep. Why is it so ridiculously complicated to center an element vertically in CSS? WHY!? The math isn’t hard. We know this because have been working around this deficiency for years with JavaScript. Purely out of historical frustration, the ability to sanely position children elements within a layout in a syntax that actually makes sense is probably one of my most favorite features of Angular Material.

<div layout="row" layout-align="center center">
<div>one</div>
<div>two</div>
<div>three</div>
</div>

We should all take a moment and send a mental hug to the Angular Material team. {{HUG}}

3. Aesthetics

I have no intention of marginalizing the excellent work done by Twitter Bootstrap and Angular UI Bootstrap. Solid work by all and I have used them both on many projects. With that said, Material Design and by proxy Angular Material has taken the aesthetic index up to a whole new level. Take a moment to check out the super hype video above and realize that we get all of that candy right out of the box.

Case in point, the date picker component. Just the static image is gorgeous!

I encourage everyone to go to the website and actually touch the component and see how well it moves on the page. Now pull up the same page on a mobile device and see how well that moves. I had a mic drop moment with a client the other day when I showed them this demo. These are the kind of moments where you win friends and influence people.

4. Components

If Material Design is the heart and soul of the operation, then Angular Material would be the muscles. At last count, there were almost 50 Angular components at our disposal within our Angular application.

Need a button? No problem!

<md-button>{{title1}}</md-button>

Your button really needs to be a link? All you have to do is say so.

<md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>

How about that date picker? Done.

<div ng-controller="AppCtrl">
  <md-content>

<h4>Standard date-picker</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
  </md-content>
</div>

The documentation for Angular Material is full of working code snippets that you can grab and drop in your application immediately. This was how I learned Angular Material after I over-promised at the hackathon I mentioned early. I personally appreciate it when documentation is so good that the examples can be used right out of the box.

Angular Material also ships with some critical services that make managing dynamically placed elements such as a dialog or bottom sheet a snap.

For instance, we can control the insertion and visibility of a bottom sheet using the $mdBottomSheet service as follows:

var app = angular.module('app', ['ngMaterial']);
app.controller('MyController', function($scope, $mdBottomSheet) {
  $scope.openBottomSheet = function() {
    $mdBottomSheet.show({
      template: '<md-bottom-sheet>Hello!</md-bottom-sheet>'
    });
  };
});

5. Accessibility

Accessibility is one of the most important considerations to be factored into a web application and, more often than not, it does not even land on the radar of topics of conversation. I am willing to admit that this was not a factor that I intrinsically took into consideration when building Angular applications. My worldview shifted when I met Marcy Sutton and saw the awesome work she was doing with accessibility on the web. In terms of social impact, one of the most important features of Angular Material is that accessibility is baked right into the project.

Check out this awesome talk that Marcy gave at ngEurope 2014 which changed everything for me.

One example of how accessibility is front and center of the framework is the prominence that the aria-label attribute plays amongst the component set. For instance, if default text is not found on a button and aria-label is not defined, Angular Material will log an error in the console.

Conclusion

On a personal level, Angular Material amplifies the feeling that I get when I work with Angular in that I never stop being impressed with the power and functionality that it brings to how I build web applications. I am always impressed at how I am always impressed with Angular and by extension, Angular Material.

Just to summarize my points.

• Material Design is the soul of Angular Material and it makes great design the default.
• Layout in Angular Material is sensible and easy to articulate.
• The aesthetic index of Angular Material right out of the box is off the charts. It is just so smooth!
• Angular Material ships with a huge set of components that reduces the complexity of Material Design to nothing more than building out a regular Angular application.
• Accessibility is baked right into Angular Material and which should be important to everyone because it is everything to someone.

I want to give a huge shout out to my friend and mentor, Thomas Burleson for the amazing work that he has done with Angular Material. Every time I use the framework, I pour out a little champagne in his name for the amount of time it saves me.

Resources

Angular Material Website

Material Design Website

Angular Developer Guide: Accessibility

Flexbox Specification