This is the HTML code snippet for my component:
<div>
<mat-sidenav-container class="main-container">
<mat-sidenav #sideBarRef opened mode="side" [(opened)]='isSideBarOpen'>
<mat-nav-list>
<a mat-list-item href="#"> Home </a>
<a mat-list-item href="#"> Updates </a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary"><button (click)='sideBarRef.toggle()'><mat-icon>menu</mat-icon></button>My Application</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
Next, take a look at my app.module.ts file:
export class AppModule {
title = 'Angular Application';
isSideBarOpen = true;
openSideBar() {
this.isSideBarOpen = true;
}
closeSideBar() {
this.isSideBarOpen = false;
}
}
I declared the variable isSideBarOpen but why am I encountering an error saying that it does not exist?