Using Material Design In Angular 2

To get started with Angular 2 and Material Design just go through the following steps:

1) Start with a new project setup

By following the Angular 2 quickstart tutorial you can set up a new base project structure:


2) Introduce Material Design

Angular 2 Material Design Components are available as NPM packages. A full list of packages can be found at

A general introduction and overview of Google’s Material Design can be found at

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.

3) Install Angular 2 Material Design NPM Packages

Angular 2 Material Design NPM packages can be installed by using the npm command like you can see in the following:

$ npm install —save @angular2-material/core @angular2-material/button @angular2-material/card @angular2-material/icon

Note: The core module is always required as a peer dependency of other components

4) Install HammerJS

We need to add the third-party library HammerJS to our project. Hammer add support for touch gestures and is used by the Icon Material components. HammerJS is available as a NPM package, so we can install and add it to the project dependencies by using the following command:

$ npm install hammerjs —save

And the corresponding typings via:

$ typings install dt~hammerjs —save –global

5) SystemJS Configuration

Next, add the Angular 2 Material NPM packages to systemjs.config.js by using the UMD (Universal Module Definition) files:

map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser- dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'@angular2-material/core': 'npm:@angular2-material/core/core.umd.js',
'@angular2-material/card': 'npm:@angular2-material/card/card.umd.js',
'@angular2-material/button': 'npm:@angular2-material/button/button.umd.js',
'@angular2-material/icon': 'npm:@angular2-material/icon/icon.umd.js',

6) Import Material Modules and Providers in AppModule

We are only using one Angular 2 module in our application (AppModule). We need to make the Angular 2 Material elements available within this module. First add the corresponding import statements:

import {MdCardModule} from '@angular2-material/card';
import {MdButtonModule} from '@angular2-material/button';
import {MdIconModule} from '@angular2-material/icon';
import {MdIconRegistry} from '@angular2-material/icon';

Next the modules needs to be added to the array which is assigned to the imports property of the @NgModule decorator. MDIconRegistry needs to be added to the array which is assigned to the providers property:

imports: [ BrowserModule, MdCardModule, MdButtonModule, MdIconModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ MdIconRegistry ]
export class AppModule { }

7) Include Google Material Icon Font in index.html

By default Material Icons make us of the Google Material Icon Font, so we need to import the font in index.html:

<link href=““ rel=“stylesheet“>

8) Implement AppComponent template in app.component.html

We’re implementing the component’s template by making use of Material Card, Buttons and Icons:

<div class="app-content">
<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-icon-button>
<md-icon class="md-24">favorite</md-icon>
<button md-fab>
<md-icon class="md-24">add</md-icon>
<button md-mini-fab>
<md-icon class="md-24">add</md-icon>
<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
<button md-button disabled>OFF</button>
<button md-raised-button disabled>OFF</button>
<button md-mini-fab disabled><md-icon>check</md-icon></button>

Include the external template file in the component decorator:

import { Component } from '@angular/core';
selector: 'my-app',
templateUrl: './app/app.component.html'
export class AppComponent { }

9) Add some styling

In addition we can add some CSS styling. Add the styleURLs property to @Component and point to the external styling file app.component.css:

import { Component } from '@angular/core';
selector: 'my-app',
templateUrl: './app/app.component.html',
styleUrls: ['./app/app.component.css']
export class AppComponent { }

Create the CSS file in the app folder and insert the following content:

.app-content {
padding: 20px;
.app-content md-card {
margin: 20px;

10) Final Result

Having finished the implementation we can start up the application by using the following command:

$ npm start

and view the final result in the browser:

Angular 2 Material Design Sample Application


Using and writing about best practices and latest technologies in web design & development is my passion.

    View Comments