Property 'isSideBarOpen' does not exist on type 'AppComponent'

Below is my html 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>

Here is my app.module.ts file

export class AppModule { 
  title = 'Angular Application';
  isSideBarOpen = true;

  openSideBar() {
    this.isSideBarOpen = true;
  }
  closeSideBar() {
    this.isSideBarOpen = false; 
  }
}

even though I declared variable isSideBarOpen, why I'm getting variable isSideBarOpen doesnot exist error.

That variable should exists in app.component.ts and not in app.module.ts considering html code in app.component.html