Introduction to Angular Material

Material design is popping up everywhere and it is becoming a standard for websites, apps and other graphical user interfaces. There are a few ways to implement material design into your workflow. Since Trivento loves working with AngularJS, this blog/tutorial specifically takes a look at implementing Angular Material.

Angular Material provides a series of modules, directives, css classes and so on which help create a modern looking interface conform the material design system. Angular Material covers graphics and animations like the look and feel of buttons and inputs, but it also has a layout system which creates responsive layouts. Therefore it could replace frameworks like Bootstrap and Foundation.

Setting up Angular Material in your project

To save some time, fork this codepen which includes all the dependencies. If you like to stick to your own project, include the scripts below in your index.html. Don’t forget to include the modules in your app.js: ngAnimate,ngAria,ngMaterial

Layout

To get a responsive layout Angular Material uses flexbox. Flexbox is explained very briefly on the Angular Material website so for better understanding of flexbox it might be smart to take a look at it separately. In the codepen project you will see an implementation of a whiteframe, Angular Materials’ implementation for the paper element. To give this whiteframe responsive measures we can wrap it into a div with the following attributes:

flex=“50" offset=“25”

You will notice the content within the div now has a width of 50% with a margin left and right of 25%. To add responsiveness, add the same attributes for small devices like this:

flex-sm=“90" offset-sm=“5”

The content will have a margin of only 5% on small devices.

Basic input

We will create a simple register page using some inputs from the Angular Material demos. First create a user object in javascript with a default gender on the $scope:

Afterwards, include the module ‘ngMessages’ to the list of dependencies so that the directive ‘ng-messages’ can be used. Add the following code below the <input> :

<div ng-messages="registerForm.name.$error"> <div ng-message="required"> Sorry but we don't register people who don't have a name </div></div>

When the field now is left empty the message should look like the image below. The cool thing about ng-messages is that you can add multiple ng-messages who all trigger by a different validation.

Colors

Colors are a very important part of the material design system. Angular Material has a predefined color palette. A color palette consists out of 4 types of colors: a primary color, an accent color, a warning color and a background color. These colors are automatically used where they should be used according to the material design system . For example, a validation message on an input automatically has the warn color. When starting a project the default colors are set to:

primary = indigo

accent = pink

warn = red

background = grey

This is a nice palette, but default is boring so lets change it. Do this using the $mdThemingProvider by adding this piece of code to the javascript:

Final result

The final result should look like the codepen here. I added some icons to get an idea of the accent colors.

For now this is the end of this small introduction to Angular Material. The examples given in this tutorial are a small collection of what Angular Material has to offer so hopefully they made you curious enough to find out what else is out there! Good luck!