How to use Angular 2 Material in Angular 4/Angular-CLI

(Last Updated On: October 12, 2017)

How to use Angular 2 Material in Angular 4/Angular-CLI:

 

Important note:

Due to breaking change in angular material 2, steps are changed to integrate with angular 4 cli. Below post is created with the latest updates and explained step by step. Please refer the below link.

[Updated] Adding Angular Material 2 to Angular 4 CLI

Please don’t follow from here, it wont work with latest angular material 2

 

 

Angular material is a CSS framework like bootstrap for angular projects. As both are developed by google there will be more convenient in the integration part rather than other CSS frameworks like bootstrap/foundation etc.

In order to use angular material in angular 4 you need to complete the below 5 steps process, also to note in angular 2 both angular material and animation were together, but in angular 4 angular animations has been moved to separate package. So it is mandatory to install angular animation and add its components in ngModule.

 

Step 1: Install angular material and angular animations

To install Angular Material:

npm install –save @angular/material

 

To install Angular Animations:

npm install –save @angular/animations@latest

 

Step 2: Import MaterialModule and BrowserAnimationsModule in ngModule

import { MaterialModule } from ‘@angular/material’;

Also in

imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
MaterialModule
],

 

 

Step 3: Add this link for Angular Icons in index.html

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

 

Step 4: Add prebuilt theme in styles.css file:

@import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;

Step 5: Add mat-app-background class to body to use angular material in index.html

<body class=”mat-app-background“>

All the steps are finished. Just for testing I added a sample button in app.components

<button md-raised-button class=”mat-primary”>
{{title}}
</button>

 

and compiled and viewed material button in the browser.

How to use Angular 2 Material in Angular 4/Angular-CLI

Feel free to write your thoughts/doubts/suggestions below.

433 total views, 2 views today

Leave a Reply

Your email address will not be published. Required fields are marked *