Cannot bind mode in Mat-SideNav

Question

I am building a side nav in Angular using Material SideNav. But when I bind [(mode)], it always throwing error:

The property and event halves of the two-way binding 'mode' are not bound to the same target.

Find more at https://angular.io/guide/two-way-binding#how-two-way-binding-worksngtsc(-998007)

index.d.ts(14, 8): The property half of the binding is to the 'MatSidenav' component.

layout.component.ts(5, 6): The event half of the binding is to a native event called 'mode' on the DOM element.

Are you missing an output declaration called 'modeChange'?

My html:

<div class="layout-container">
  <app-top-nav (sideNavToggled)="snav.toggle()"></app-top-nav>

  <mat-sidenav-container class="sidenav-container" [style.marginTop.px]="toolBarHeight">
    <mat-sidenav #snav class="sidenav mat-elevation-z10" [(opened)]="sideNavOpened" [(mode)]="sideNavMode" >
      <app-side-nav></app-side-nav>
    </mat-sidenav>
    <mat-sidenav-content>
      <main class="main-container">
        <router-outlet></router-outlet>
      </main>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

My ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MediaObserver, MediaChange } from '@angular/flex-layout';
import Input from '@material-ui/core/Input';
import { Subscription, map } from 'rxjs';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss'],
})
export class LayoutComponent implements OnInit, OnDestroy {
  sideNavOpened = true;
  sideNavMode: 'side' | 'over' = 'side';
  toolBarHeight = 64;
  private readonly mediaWatcher: Subscription;
  constructor(media: MediaObserver) {
    this.mediaWatcher = media
      .asObservable()
      .pipe(map((changes: MediaChange[]) => changes[0]))
      .subscribe((change: MediaChange) => {
        if (change.mqAlias === 'sm' || change.mqAlias === 'xs') {
          if (this.sideNavOpened) {
            this.sideNavOpened = false;
          }
          this.sideNavMode = 'over';
        } else {
          this.sideNavOpened = true;
          this.sideNavMode = 'side';
        }
        if (change.mqAlias === 'xs') {
          this.toolBarHeight = 56;
        } else {
          this.toolBarHeight = 64;
        }
      });
  }
  ngOnInit() {}

  ngOnDestroy(): void {
    this.mediaWatcher.unsubscribe();
  }
}

I don't know how to fix this. Please help me. Thank you so much.

Answer 1

use mode in this way

[mode]="sideNavMode"