Angular Material: ¿Cómo cerrar MatSidenav desde dentro de un método en el componente en lugar de desde el html?
Utilizando Angular + Angular Material 12
Si desea cerrar MatSidenav, entonces casi todas las soluciones que he encontrado dicen:
(click)="sidenav.close()"
en el componente html.
Pero necesito que (click) sea para mi función de cierre de sesión: (click)="onLogoutSideNav()"
onLogoutSideNav() {
this.authService.logout();
}
Necesito cerrar MatSidenav desde dentro de un método en el componente en lugar de desde el html. La única solución que encontré dice:
sidenav!: MatSidenav
...
onLogoutSideNav() {
this.authService.logout();
this.sidenav.close();
}
Pero al hacerlo, esto devuelve indefinido para this.sidenav.
Hay una tonelada de soluciones para usar @ViewChild, pero no he dividido mi navegación en componentes de encabezado y barra lateral. Lo mantengo simple, haciéndolo desde dentro de app.component.
<mat-list-item *ngIf="isAuth" routerLink="/"><button mat-icon-button><mat-icon>logout</mat-icon><span class="sidenav-span" (click)="onLogoutSideNav()">Cerrar sesión</span></button></mat-list-item>
¿Qué me falta aquí?
davy.ai
Puedes utilizar el decorador
@ViewChild
para obtener una referencia a la instancia deMatSidenav
en tu componente. Luego puedes utilizar el métodoclose()
en la instancia para cerrar el sidenav.En tu archivo
app.component.ts
, agrega lo siguiente:Luego, en tu método
onLogoutSideNav()
, agrega lo siguiente:Finalmente, en tu archivo
app.component.html
, agrega el atributo#sidenav
al elementomat-sidenav
: