[Updated] Adding Angular Material 2 to Angular 9 CLI

Adding Angular Material 2 to Angular 4 CLI:

Recently breaking changes has been made to angular material 2 as per this github link, so step to add angular material 2 to angular 4 cli is also changed. I have followed the new steps and it works fine without any issues.

I have shared the step by step instruction below to add angular material 2 to your angular 4 cli.

Breaking change high level:

We used to import MaterialModule previously, now we have to import the individual components whichever we use to our app module, say if we used checkbox in our app then previously MaterialModule import itself will take care of this. Now we have to import radio module like this [MatCheckboxModule] in order to make it work.

 

Feel free to comment if you face any issues.

1. Create new Angular 4 CLI project

ng new jd-material-new

 

2. Install Angular Material 2

Go to the newly created folder and run the below command,

jd-material-new> npm install –save @angular/material @angular/cdk

It should install,

+– @angular/cdk@2.0.0-beta.12
`– @angular/material@2.0.0-beta.12

 

3. Install Angular animations

npm install –save @angular/animations

it should install,

`– @angular/animations@4.4.4

 

4. Import BrowserAnimationsModule to App Module

import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’;

@NgModule({
imports: [BrowserAnimationsModule],
})

 

5. Import the components you want to App Module

import {MatButtonModule, MatCheckboxModule} from ‘@angular/material’;

 

@NgModule({
imports: [MatButtonModule, MatCheckboxModule],
})

 

(or)

keep one module only for material specific imports and import that to your app module.

 

Order Matters:

Whichever approach you use, be sure to import the Angular Material modules after Angular’s BrowserModule, as the import order matters for NgModules.

6. Including a theme in styles.css:

In styles.css

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

Some angular material components  (like mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS, so lets install that as well.

7. Installing HammerJS

npm install –save hammerjs

it should install,

`– hammerjs@2.0.8

After installing, import it on your app’s entry point (e.g. src/main.ts).

8. Import hammerjs in main.ts file

Import into your main.ts:

import ‘hammerjs’;

9. Adding Material icons (optional)

Last, add the material icons as well to index.html file,

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

How to test whether angular material 2 successfully added to your angular 4 cli ?

Herewith I am providing the code details for your quick reference:

app.module.ts:

 

[typescript]
import { BrowserModule } from ‘@angular/platform-browser’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { NgModule } from ‘@angular/core’;
import { MatButtonModule, MatCheckboxModule, MatCardModule,MatInputModule, MatRadioModule } from ‘@angular/material’;
import { FormsModule } from ‘@angular/forms’;
import { HttpModule } from ‘@angular/http’;
import { AppComponent } from ‘./app.component’;

@NgModule({
declarations: [
AppComponent
],

imports: [
BrowserModule,BrowserAnimationsModule,MatButtonModule,MatCheckboxModule,FormsModule,HttpModule,MatCardModule,MatInputModule,MatRadioModule],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

[/typescript]

 

 

 

app.component.ts

[typescript]
import { Component } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})

export class AppComponent {
title = ‘app’;
}
[/typescript]

 

app.component.html:

 

[html]
<mat-card>
<mat-card-content>
<h2 class=”example-h2″>Checkbox configuration</h2>
<section class=”example-section”>
<mat-checkbox class=”example-margin” [(ngModel)]=”checked”>Checked</mat-checkbox>
<mat-checkbox class=”example-margin” [(ngModel)]=”indeterminate”>Indeterminate</mat-checkbox>
</section>
<section class=”example-section”>
<label class=”example-margin”>Align:</label>
<mat-radio-group [(ngModel)]=”align”>
<mat-radio-button class=”example-margin” value=”start”>Start</mat-radio-button>
<mat-radio-button class=”example-margin” value=”end”>End</mat-radio-button>
</mat-radio-group>
</section>
<section class=”example-section”>
<mat-checkbox class=”example-margin” [(ngModel)]=”disabled”>Disabled</mat-checkbox>
</section>
</mat-card-content>
</mat-card>
<mat-card class=”result”>
<mat-card-content>
<h2 class=”example-h2″>Result</h2>
<section class=”example-section”>
<mat-checkbox
class=”example-margin”
[(ngModel)]=”checked”
[(indeterminate)]=”indeterminate”
[align]=”align”
[disabled]=”disabled”>I’m a checkbox</mat-checkbox>
</section>
</mat-card-content>
</mat-card>

[/html]

 

styles.css:

[css]
/* You can add global styles to this file, and also import other style files */
@import “~@angular/material/prebuilt-themes/indigo-pink.css”;
[/css]

main.ts:

 

[typescript]
import { enableProdMode } from ‘@angular/core’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app/app.module’;
import { environment } from ‘./environments/environment’;
import ‘hammerjs’;
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

[/typescript]

 

 

Run using ng start and you will be able to see the below output: