Let's try Angular Material.

September 14, 2016

Preface:

As part of my series on learning Angular, I am checking out Angular Material, a cool library for implementing Googles Material Design with Angular, come along and check it out !

Note : this is some intermediate Angular stuff, check out my previous posts if you are just getting started:

• Getting started with Angular JS
• More Angular JS Pens

Also Note : Change is coming… Angular 2 is just around the corner, but for the time being we’ll be working with Angular and Angular Material 1 since they are well documented/stable

Pre flight Check:

• Angular Material Website - Check The release though, this post was made with 1.1.1
• Google Material Design - Read it (long read) or gloss over the documentation to get acquainted with the style,what,why,etc. In production you will most likely be given a wire frame from a designer, but if you are a one man show, it’s up to you to keep things consistent or not.

Ok, Let's get started

See the Pen Angular Material Hello World by Eugenio - Keno - Leon (@k3no) on CodePen.

And there you have it sir, the very simple but ubiquitous cat card component, what did we learn ? couple of things:

• 1. You need to import a few scripts plus the CSS ( Check the settings )
• 1. It works like a charm and a lot like Bootstrap ( Check the HTML )

In General :

• Start with the directive, in this case md-card
• And if you get stuck check their demos:Card Demo

Grids

Layouts are a huge part of what makes a front end library useful, let’s look at what Angular Materials has to offer.

See the Pen Angular Material Layout by Eugenio - Keno - Leon (@k3no) on CodePen.

Lessons learned ? Angular Material builds on top of flexbox via directives to specify your layout, sounds a little complicated, but in reality ( after a bit of trial and error), it goes like this:

• 1. Add a Layout directive and specify a row or Column flow, add responsive layouts attributes
• 1. Add content

Like any other grid system ( think Bootstrap) there are specific breakpoints for different devices and a host of other niceties to center, add padding, hide, order etc,etc, a good way to get into them is checking the very nice documentation:

• Layout Introduction

Since Layouts are such a big part of development, let’s dig deeper.

See the Pen Angular Material Complex Layout by Eugenio - Keno - Leon (@k3no) on CodePen.

So like bootstrap, you concatenate or chain options to both the layout container and the individual content blocks to affect display ( following flexbox conventions ), only here you do it with directives instead of classes, all the extra options,troubleshooting and details are explained in the very concise documentation.

More Complex Directives

Now that we have a decent grasp of the basics ( or so I hope), let’s explore more interactive elements, let’s start with an autocomplete:

See the Pen Angular Material Autocomplete by Eugenio - Keno - Leon (@k3no) on CodePen.

A super minimal example of autocomplete, note I am also using googles material icon library, in a nutshell, the autocomplete provides handles for expressions in the model and options (extra directives) for customizing your autocomplete, if you get stuck or want to implement a real world autocomplete, consult the docs…

• Directive Documentation: md-autocomplete
• Demos: AutoComplete Demos

Multiple Directives

Feeling a little more confident, so let’s try adding more than one directive inside a layout to up the ante.

See the Pen Angular Material Multiple Directives + Layout by Eugenio - Keno - Leon (@k3no) on CodePen.

And there you have it, a very,very,very simple semi functional ( I left out the model), but practical Angular Material App.

Directives Used:

• md-whiteframe
• md-content
• md-datepicker
• md-placeholder
• md-switch
• md-list
• md-divider
• ng-if

The Takeway

Angular Material is a powerful,complex and extensive companion to the Angular Framework, I tried my best to cover all the bases, but I left a lot of things out which hopefully I’ll cover in a second post, I hope this serves you as a gentle introduction to Angular Material.

Best,

Keno