mat-sidenav push property causing a build error

Question

I'm on Angular 6 and am using mat-sidenav

<mat-sidenav #drawer position="end" fixedInViewport="true" [mode]="push" [opened]="false">

However, when I run ng build --prod, it throws an error Property 'push' does not exist on type 'MyComponent'.

Everythign works fine, but this error is hindering our deployment process.

Also, another question. Why is [mode] in square brackets. Aren't square brackets in Angular 2+ used only when evaluating an expression? In this case it's just the string 'push' right? If I remove the square brackets, the sidenav stops working.

Answer 1

If push is the actual literal value that is expected in the mat-sidenav component, then pass the string push within single quotes.

<mat-sidenav #drawer position="end" fixedInViewport="true" [mode]="'push'" [opened]="false">

If you don't pass in the single quotes, the angular code will search for a variable in your component named push and pass its value to mat-sidenav