angular material installation and setup in visual studio code

1. Install Angular material and angular CDK – Provides more tools of angular material design
2. Npm install –save @angular/material @angular/cdk
3. To angular animation , we have to install angular animation module

Npm install –save @angular/animations

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

In app.module.ts and pass reference of BrowserAnimationsModule in imports

5. Pass angular material component like button and checkbox add them into app.module.ts

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

add reference into imports section also

@NgModule({

declarations: [

AppComponent,

HttpexComponent,

MatButtonModule,

MatCheckboxModule

],

6. Passing each angular material component i.e checkbox, button etc in app.module.ts is very tedious so we can create new module using following command

Ng g m shared\material –flat(this will create shared folder and material.module.ts)

7.Remove reference of  newly added modules from app.module.ts

Remove following

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

and from @ngModule

MatButtonModule,

MatCheckboxModule

7. Add following code into newly created material module

import { NgModule } from ‘@angular/core’;

import { CommonModule } from ‘@angular/common’;

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

@NgModule({

imports: [

CommonModule,

MatButtonModule,

MatCheckboxModule

],

exports: [

MatButtonModule,

MatCheckboxModule

]

})

export class MaterialModule { }

8. Make Changes in app.module.ts and pass reference of newly created material module
9. Add following code in imports of app.module.ts

MaterialModule

import { MaterialModule } from ‘./shared/material.module’;

10. Now we want to test angular material module

Open https://material.angular.io/

Add Button Module code into app.component.html

<button mat-button>Click me!</button>

11. Now Its not looking fine what will be do next, angular material provides some themes , you may include them in your project
12. Add Following code into styles.css

@import ‘~@angular/material/prebuilt-themes/indigo-pink.css’