Access MatDrawer using ViewChild is throwing error in Angular 8

Question

I'm trying to set the behavior of MatSideNav through component file using a property of type MatDrawer in Angular version 8

TypeScript Code:

// Declaration
@ViewChild('drawer', { static: false }) public drawer: MatDrawer;

// Toggle the Side Nav bar
showSideNav(): void {
    this.drawer.toggle();
}

HTML Code:

<mat-drawer-container>
      <mat-drawer #drawer>
        <div>Side nav bar content</div>
      </mat-drawer>
      <div>Main content</div>
</mat-drawer-container>

Console Error:

ERROR TypeError: "this.drawer is undefined"

Kindly assist me how to access the MatDrawer element using @ViewChild

set static to true, or add an *ngIf to the template (they mentioned this in the documentation but i cannot quite remember) — Francisco Santorelli, Jun 03 '19 at 12:17
@FranciscoSantorelli - Yes I tried it, it gives the same error. — B.Balamanigandan, Jun 03 '19 at 12:18
Weird, it works for me https://stackblitz.com/edit/angular-tyrccg?file=app/sidenav-drawer-overview-example.html — yurzui, Jun 03 '19 at 12:20
@yurzui - Still I'm getting the same error, kindly wait a moment I'll check and try to reproduce the same in StackBlitz. — B.Balamanigandan, Jun 03 '19 at 12:24

score 5 · Answer 1 · edited Jan 09 '21 at 12:43

5

Change declaration from

@ViewChild('drawer', { static: false }) public drawer: MatDrawer;

to

@ViewChild('drawer', { static: true }) public drawer!: MatDrawer;

edited Jan 09 '21 at 12:43

pzaenger

11,381
3
45
46

answered Jan 09 '21 at 12:40

Varun Ahuja

51
2
3

score 1 · Answer 2 · answered Jun 28 '22 at 17:33

1

In my case, the problem was because I had not imported MatSidenavModule in my Angular module. I could still refer to MatDrawer without error because I had Material installed, but it was not in the module import list.

answered Jun 28 '22 at 17:33

ScottG

534
4
9

score 0 · Answer 3 · answered Feb 10 '23 at 12:41

I was able to resolve similar issue by passing the mat-drawer / sidenav id in the child component using @Input decorator, so in case of OP's problem statement something like this might work.

// Declaration
@Input drawerHandler: MatDrawer;

// Toggle the Side Nav bar
showSideNav(): void {
    this.drawerHandler.toggle();
}

And in template pass this input id value using a property binding

<mat-drawer-container>
      <mat-drawer #drawer [drawerHandler]="drawer">
        <div>Side nav bar content</div>
      </mat-drawer>
      <div>Main content</div>
</mat-drawer-container>

Access MatDrawer using ViewChild is throwing error in Angular 8

3 Answers3