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
Change declaration from
@ViewChild('drawer', { static: false }) public drawer: MatDrawer;
to
@ViewChild('drawer', { static: true }) public drawer!: MatDrawer;
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With