es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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í?

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Puedes utilizar el decorador @ViewChild para obtener una referencia a la instancia de MatSidenav en tu componente. Luego puedes utilizar el método close() en la instancia para cerrar el sidenav.

    En tu archivo app.component.ts, agrega lo siguiente:

    @ViewChild('sidenav', {static: false}) sidenav: MatSidenav;
    

    Luego, en tu método onLogoutSideNav(), agrega lo siguiente:

    onLogoutSideNav() {
        this.authService.logout();
        this.sidenav.close();
    }
    

    Finalmente, en tu archivo app.component.html, agrega el atributo #sidenav al elemento mat-sidenav:

    <mat-sidenav #sidenav="">
      ...
    </mat-sidenav>
    

Comments are closed.