Using the Material Drawer component in an Angular app

Question

How do I integrate the Material Drawer component in an Angular app? I cannot get it to render properly using the instructions in https://material.io/develop/web/components/drawers/

Can some one provide step-by-step instructions to make mdc-drawer work as shown in the demo?

Answer 1

you can do like this step by step.

step 1 :- install angular material using this command npm install @angular/material in your project.

step 2 :- add this in your index.html header

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

step 3 :- import below modules in your app.modules.ts or your root module file.

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

step 4 :- add these modules in imports array.

step 5 :- add this in you html file.

<mat-sidenav-container class="example-container" *ngIf="shouldRun">
  <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
               (closed)="events.push('close!')">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <mat-icon aria-hidden="false" aria-label="Example home icon" (click)="sidenav.toggle()">menu</mat-icon>
        <span>Custom Toolbar</span>
      </mat-toolbar-row>
    </mat-toolbar>
    <p>Events:</p>
    <div class="example-events">
      <div *ngFor="let e of events">{{e}}</div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

step 6 :- add this in you ts file.

events: string[] = [];
opened: boolean;

shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));

step 7 :- add this in your component scss file.

.example-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

step 8 :- add this in you style.scss file.

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

please check working demo

If you still face any issue, do let me know.