Including angular material in angular projects

To include angular material in your angular projects, use the below command. ng add @angular/material

ng add @angular/material

I tried to run the above command and I got the below error.

error without including angular material

So, The angular material version, what I tried to add is not compatible with the angular, node version I had.

So run the below commands to install correct versions of angular material,CDK and animation components.

npm install @angular/cdk@6.0.0

npm install @angular/material@6.0.0

npm install @angular/animation@6.0.0

Then in app.module.ts, added the below code to import the modules.

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
Imports:[
FormsModule,
MatInputModule,
MatButtonModule,
MatSelectModule,
MatIconModule
]

To check the angular material installed, I am going to include one angular material component.

app-component.html

<mat-drawer-container class="example-container">
<mat-drawer mode="side" opened>
<h2>Demo app-Side menu</h2>
</mat-drawer>
<mat-drawer-content>
<h2>Main content</h2>
</mat-drawer-content>
</mat-drawer-container>

app-component.ts

import {MatSidenavModule} from ‘@angular/material/sidenav’;

import {MatMenuModule} from ‘@angular/material/menu’;

OUTPUT :

Then compile the application ,with the command ng serve.

You should get the below screen output.