I'm using angular 5 and angular material. i have a mat-sidenav-container
that consists of mat-sidenav
and a mat-sidenav-content
. and I have a mat-toolbar in the top of my page. I want to use routerLink in my sidenav-content
but it's not working however it works in my mat-toolbar. even a button click function is not working. here are my codes below
<mat-toolbar>
<mat-toolbar-row>
<div>
<button mat-icon-button class="button" (click)="sidemenu.toggle()">
<mat-icon class="menu">menu</mat-icon>
</button>
</div>
<div mat-card-avatar class="example-header-image"></div>
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" opened #sidemenu>
<mat-nav-list>
<mat-list-item appAccordionLink>
<a appAccordionToggle>
<mat-icon class="list-icon">inbox</mat-icon>
<span class="link">IncomingMail</span>
<span fxFlex></span>
</a>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<a routerLink="/">Home</a>
</mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-container>