Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError in the sidenav angular material

Question

I have the next code:

 <mat-sidenav #sidenav                 
                 [fixedInViewport]="false"
                 [opened]="opened"
                 mode="side"
                 fxFlex="none"
                 [style.position]="sidenav.mode !== 'push' && sidenav.opened  ? 'relative' : 'absolute'"
                 style="width: 25rem;"
                  >

The error happens with this expression: [style.position]="sidenav.mode !== 'push' && sidenav.opened ? 'relative' : 'absolute'":

Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'absolute'. Current value: 'relative'.

The error doesn't happen if I put opened but then, I can't close the menu by default in responsive.

The link in stackblitz is here

Answer 1

In your example I have removed sidenav.opened from the expression and then the error isn't appearing. The Sidenav is also closing and opening as expected in differnt resolutions.