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:
ONLINE COURSE: Angular - The Complete Guide
Check out the great Angular – The Complete Guide with thousands of students already enrolled:
- This course covers Angular 4
- Develop modern, complex, responsive and scalable web applications with Angular
- Use their gained, deep understanding of the Angular 2 fundamentals to quickly establish themselves as frontend developers
- Fully understand the architecture behind an Angular 2 application and how to use it
- Create single-page applications with on of the most modern JavaScript frameworks out there