Material Design Components For Angular

Part 1: Introduction

Subscribe On YouTube

DemoCode

Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google’s goal is to develop a system of design that allows for a unified user experience across all platform.

Using material design with Angular is easy because of set of material design components is provided by the Angular core team. The project website can be found at http://material.angular.io.

This is the beginning of our Angular Material series. In this first part you’ll be walked through the steps which are need to setup an Angular project include the Angular Material Design Library in your project. In the upcoming parts we’ll take a look at the most important Material Design components in detail.

Let’s get started …

1) Initiating A New Angular Project

First we need to initiate a new Angular project. The easiest way to to so is to use Angular CLI (http://cli.angular.io). I’ve you haven’t installed Angular CLI yet, you can complete the installation by using the following command:

$ npm install -g @angular/cli

Now we’re able to use the ng command to initiate a new project like you can see in the following:

$ ng new ng-md-01

A new project directory ng-md-01 is created and the initial Angular project structure is created within that directory. We can now change into that directory

$ cd ng-md-01

and start the development web server by using the following command:

$ ng serve

2) Install Angular Material

Next, we need to install the Angular Material and the Angular CDK package by using the npm command again:

$ npm install —save @angular/material @angular/cdk

The Angular CDK package (CDK = component dev kit) is comprises general-purpose tools that are used for building components and are not related to Material Design directly.

3) Install The Angular Animations Module

Some of the Angular Design components make use of advanced transition effects which are based on the Angular Animations library. To make use of those transition effects you need to install this library as well:

$ npm install —save @angular/animations

Having installed the Angular Animations library we need to include the BrowserAnimationsModule in our application. This can be done by importing BrowserAnimationsModule in app.module.ts and adding it to the array which is assigned to the imports property of @NgModule in the same file.

4) Including A Theme

Angular Material supports themes. A theme is a set of colors which are applied to the Material Design components. To get the styles right it’s mandatory to include a theme. Here we can use one of the standard themes which are part of the library. The pre-build themes are located in @angular/material/prebuilt-themes . The following themes are available:

deeppurple-amber.css

indigo-pink.css

pink-bluegrey.css

purple-green.css

The import a theme in our application you can add the following line of code to styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

5) Including Hammer.js For Gesture Support

Some of the Material Design components ( md-slide-toggle , md-slider , mdTooltip) include support for gestures which is implemented by using the HammerJS library. If you would like to enable gesture support, you do need to install the HammerJS library by using the following command first:

$ npm install —save hammerjs

Having installed HammerJS, next include it in the root module of your Angular application:

import 'hammerjs';

6) Add Material Icons Library

Finally, if you want to make use of Angular Material icons, the last line of code which needs to be added to the header section in index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Using Material Design Components For Implementing A form

Now, that we’ve completed the setup of our Angular Material Design application it’s time to make use of some Material Design components. In the following example we’ll walk through the process of implementing a simple form with Material Design input components.

Adding A Form Component

First off all, let’s generate a new component which should be used to implement the form:

$ ng g component my-form

Executing this command in the project directory creates the following new files:

src/app/my-form/my-form.component.css

src/app/my-form/my-form.component.html

src/app/my-form/my-form.component.spec.ts

src/app/my-form/my-form.component.ts

At the same time app.module.ts is updated. First, MyFormComponent is imported:

import { MyFormComponent } from './my-form/my-form.component';

Second, it is added to the declarations array.

@NgModule({ declarations: [ AppComponent, MyFormComponent ], ... }) export class AppModule { }

Importing Material Components

Making Material Design components available in our application is done by importing modules in app.module.ts. The form we’re going to implement will make use of various Material Design components. Therefore we need to import MdInputModule and MdButtonModule. First add the following import statement:

import { MdInputModule, MdButtonModule } from '@angular/material';

Next make sure that MdInputModule and MdButtonModule are added to the imports array as well:

@NgModule({ declarations: [ AppComponent, MyFormComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MdInputModule, MdButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

adding A Data Model Class

The form should be implemented as a template-driven Angular form. The first step is to define a data model class. Later, we’re creating an instance of that class and use that instance for data binding:

In the src/app folder create a new file address.ts and insert the following lines of code:

export class Address { constructor( public firstname?: string, public lastname?: string, public address?: string, public city?: string, public state?: string, public postalcode?: string ) {} }

Implementing The Form

Next switch to app/my-form/my-form.component.html and insert the following markup code for our address entry form:

<h3>Address Form</h3> <form class="formwidth" (ngSubmit)="onSubmit()" #myForm="ngForm"> <table class="fullwidth" cellspacing="0"> <tr> <td> <md-input-container class="fullwidth"> <input mdInput placeholder="First Name" id="firstname" [(ngModel)]="address.firstname" name="firstname"> </md-input-container> </td> <td> <md-input-container class="fullwidth"> <input mdInput placeholder="Last Name" id="lastname" [(ngModel)]="address.lastname" name="lastname"> </md-input-container> </td> </tr> </table> <p> <md-input-container class="fullwidth"> <textarea mdInput placeholder="Address" id="address" [(ngModel)]="address.address" name="address"></textarea> </md-input-container> </p> <table class="fullwidth" cellspacing="0"> <tr> <td> <md-input-container class="fullwidth"> <input mdInput placeholder="City" id="city" [(ngModel)]="address.city" name="city"> </md-input-container> </td> <td> <md-input-container class="fullwidth"> <input mdInput placeholder="State" id="state" [(ngModel)]="address.state" name="state"> </md-input-container> </td> <td> <md-input-container class="fullwidth"> <input mdInput #postalcode maxlength="5" placeholder="Postal Code" id="postalcode" [(ngModel)]="address.postalcode" name="postalcode"> <md-hint align="end"> {{postalcode.value.length}} / 5 </md-hint> </md-input-container> </td> </tr> </table> <p> <button type="submit" md-raised-button>Submit</button> </p> </form>

The form consists of six input elements plus one submit button. To apply material design to the input controls (input and textarea elements) the md-input-container element is used. Furthermore the mdInput directive is attached to input and textarea elements.

In addition a md-hint element is used together with the input element for the postal code information. By using this element we’re displaying an additional input help for the user (current length of entered value / maximum length of value).

The submit button is also displayed with Material Design applied. This is achieved by attaching the md-raised-button directive to the button element.

Please note that the Angular two-way data binding syntax is used to bind the input elements to the corresponding properties of the Address object:

[(ngModel)]="address.city"

Furthermore the submit event of the form is bound to the onSubmit method which is implemented in the next step:

(ngSubmit)="onSubmit()"

To complete the implementation of MyFormComponent we need to switch to file app/my-form/my-form.component.ts:

import { Component, OnInit } from '@angular/core'; import { Address } from '../address'; @Component({ selector: 'my-form', templateUrl: './my-form.component.html', styleUrls: ['./my-form.component.css'] }) export class MyFormComponent implements OnInit { address = new Address(); constructor() { } ngOnInit() { } onSubmit() { alert("Thanks for submitting! Data: " + JSON.stringify(this.address)); } }

First make sure to import the class Address. Having imported Address we’re creating the address instance as a member of class MyFormComponent.

Second, we’re adding the implementation of method onSubmit to the form component class. Within this method we’re calling the alert function to show a popup to the user. This popup prints out the address objects (which contains the form values) in JSON format.

Including MyFormComponent In AppComponent

To make our form visible in the browser we need to include the corresponding element in the HTML code of the application root component (AppComponent). Open file app/app.component.html and replace the content with the following code:

<div> <my-form></my-form> </div>

The result in the browser should now look like the following:

If you fill out the form and click on the submit button you’ll see a popup window: