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:

|-app
 --|-app.component.ts
 --|-app.module.ts
 --|-main.ts
 |-index.html
 |-package.json
 |-systemjs.config.js
 |-tsconfig.json
 |-typings.json

2) Introduce Material Design

Angular 2 Material Design Components are available as NPM packages. A full list of packages can be found at https://www.npmjs.com/~angular2-material.

A general introduction and overview of Google’s Material Design can be found at https://material.google.com/.

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:

@NgModule({
  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=”https://fonts.googleapis.com/icon?family=Material+Icons” 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">
  <md-card>
    <button md-button>FLAT</button>
    <button md-raised-button>RAISED</button>
  </md-card>
  <md-card>
    <button md-icon-button>
      <md-icon class="md-24">favorite</md-icon>
    </button>
    <button md-fab>
      <md-icon class="md-24">add</md-icon>
    </button>
    <button md-mini-fab>
      <md-icon class="md-24">add</md-icon>
    </button>
  </md-card>
  <md-card>
    <button md-raised-button color="primary">PRIMARY</button>
    <button md-raised-button color="accent">ACCENT</button>
    <button md-raised-button color="warn">WARN</button>
  </md-card>
  <md-card>
    <button md-button disabled>OFF</button>
    <button md-raised-button disabled>OFF</button>
    <button md-mini-fab disabled><md-icon>check</md-icon></button>
  </md-card>
</div>

Include the external template file in the component decorator:

import { Component } from '@angular/core';
@Component({
  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';
@Component({
  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: