Estoy tratando de cambiar el ícono de mat-icon dependiendo de cerrar o abrir mat-sidenav pero no puedo encontrar si sidenav está abierto o cerrado a continuación es mi código
<mat-sidenav appResponsiveMenu mode="side" opened> my menu items list </mat-sidenav>aquí está el botón de alternar
<button mat-icon-button (click)="sidenav.toggle()"> <mat-icon *ngIf="sidenav">keyboard_arrow_left</mat-icon> <mat-icon *ngIf="!sidenav">keyboard_arrow_right</mat-icon> </button>código .ts
@ViewChild(MatSidenav) sidenav!: MatSidenav;El componente mat-sidenav ha abierto la propiedad de entrada que podemos usar para verificar si sidenav está abierto o no
<button mat-icon-button (click)="sidenav.toggle()"> <mat-icon *ngIf="sidenav.opened">keyboard_arrow_left</mat-icon> <mat-icon *ngIf="!sidenav.opened">keyboard_arrow_right</mat-icon> </button>https://material.angular.io/components/sidenav/overview#opening-and-closing-a-sidenav
De los documentos:
Un mat-sidenav se puede abrir o cerrar usando los métodos open(), close() y toggle(). Cada uno de estos métodos devuelve una Promesa que se resolverá con verdadero cuando el sidenav termine de abrirse o con falso cuando termine de cerrarse.
El estado abierto también se puede establecer a través de un enlace de propiedad en la plantilla utilizando la propiedad abierta. La propiedad admite el enlace bidireccional.
Aquí hay un stackblitz con todo el código que necesitarás:
https://stackblitz.com/angular/xxbbxnybjov?file=src%2Fapp%2Fsidenav-open-close-example.ts
En este stackblitz, están utilizando el último enfoque para enlazar con la propiedad abierta del componente. La propiedad open es un valor booleano que controla si sidenav está abierto (verdadero) o cerrado (falso).
Alternativamente, si prefiere el enfoque anterior (que parece que está usando actualmente), simplemente haga lo siguiente:
@ViewChild(MatSidenav) sidenav!: MatSidenav; sidenavIsOpen = false openSideNav() { this.sidenav.open().then((sidenavIsOpen: boolean) => { this.sidenavIsOpen = sidenavIsOpen }) } closeSideNav() { this.sidenav.close().then((sidenavIsOpen: boolean) => { this.sidenavIsOpen = sidenavIsOpen }) } toggleSideNav() { this.sidenav.toggle().then((sidenavIsOpen: boolean) => { this.sidenavIsOpen = sidenavIsOpen }) }Su html se vería así:
<button mat-icon-button (click)="toggleSideNav()"> <mat-icon *ngIf="sidenavIsOpen">keyboard_arrow_left</mat-icon> <mat-icon *ngIf="!sidenavIsOpen">keyboard_arrow_right</mat-icon> </button>