How to use Angular 2 Material in Angular 9
How to use Angular 2 Material in Angular 4/Angular-CLI:
Table of Contents
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.
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.
Feel free to write your thoughts/doubts/suggestions below.