Angular Material Sidebar - How to trigger paint toggle in another component?


Jonathan Lightbringer

The button is in the navbar, which is in a different component than the sidebar. My layout looks like this:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <app-sidebar></app-sidebar>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-navbar></app-navbar>
  </mat-sidenav-content>
</mat-sidenav-container>

On the navbar I have the following buttons:

<button mat-icon-button (click)="drawer.toggle()">
  <mat-icon>menu</mat-icon>
</button>
Papa Pacho

You can either make the sidebar a child component of the navbar or you can @ViewChild('drawer') drawer: ElementRef;create a toggle class in the sidebar component and then use @ViewChild(SidebarComponent) child: SidebarComponent;in the navbar component and then usethis.child.'class_in_sidebar'

Related