Angular 6 - How to toggle sidenav from another component using button

Question

<mat-drawer-content class="btmm md-sidenav-right">
  <button (click)="sideNav.toggle()" mat-button>Toggle SideNav</button>
</mat-drawer-content>

the above code is the button in one component

<mat-drawer #sideNav mode="push" opened="false" position="end" class="navsize _md-sidenav-backdrop">
  Drawer content
</mat-drawer>

this code want to be in another component

How can i do it please do it with my code and explain it

Use `event emitter`. – user3145373 ツ Jan 05 '19 at 05:29 — user3145373 ツ, Jan 05 '19 at 05:29

Dev M · Accepted Answer · 2019-02-28T16:45:51.413

To toggle a sidenav from another component you need:

the property decorator @ViewChild.
a service to accomplish this functionality.

for example let's say you have a header component that manages all the headers and several sidenav components one for each header.

so in the:

header

header.component.html

<mat-toolbar color="primary" class="example-toolbar" [ngSwitch]="headerType">
  <!-- HEADER_1 -->
  <mat-toolbar-row color="warn" class="example-toolbar" *ngSwitchCase="1">
    <button mat-icon-button (click)="toggleSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
    <h1 class="example-app-name">HEADER 1</h1>
  </mat-toolbar-row>

  <!-- HEADER_2 -->
  <mat-toolbar-row color="warn" class="example-toolbar" *ngSwitchCase="2">
    <button mat-icon-button (click)="toggleSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
    <h1 class="example-app-name">HEADER 2</h1>
  </mat-toolbar-row>

  <!-- DEFAULT HEADER -->
  <mat-toolbar-row *ngSwitchDefault>
   <h1 class="example-app-name">DEFAULT HEADER</h1>
  </mat-toolbar-row>
</mat-toolbar>

in the header.component.ts:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';
import { SidenavService } from '../services/sidenav.service';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
   headerType: number;
   toggleActive = false;

   mobileQuery: MediaQueryList;
   private _mobileQueryListener: () => void;

   constructor(private sidenav: SidenavService,
    changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    // to change the varible in the *ngSwitch directive
    this.newHeader(1);
    // this.newHeader(2);

    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
   }

   newHeader(headerType: number) {
     this.headerType = headerType;
   }

   toggleSidenav() {
        this.toggleActive = !this.toggleActive;
        this.sidenav.toggle();
   }
}

sidenav

in the sidenav.service.ts:

import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class SidenavService {

  private sidenav: MatSidenav;

  constructor() { }

  public setSidenav(sidenav: MatSidenav) {
    this.sidenav = sidenav;
  }

  public open() {
    return this.sidenav.open();
  }


  public close() {
    return this.sidenav.close();
  }

  public toggle(): void {
    this.sidenav.toggle();
  }
}

let's say you have multiple sidenav components one for each header:

in sidenav1.component.html:

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches">

  <app-header></app-header>

  <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
      fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item routerLink="{{nav.link}}" *ngFor="let nav of fillerNav">{{nav.name}}</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

in the sidenav1.component.ts:

import { MediaMatcher } from '@angular/cdk/layout';
import { Component, OnInit, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { SidenavService } from 'src/app/services/sidenav.service';

@Component({
  selector: 'app-sidenav1',
  templateUrl: './sidenav1.component.html',
  styleUrls: ['./sidenav1.component.scss']
})
export class Sidenav1Component implements OnInit, OnDestroy {

  sidenavList1: Array<{ name: string, link: string }> = [
    { 'name': 'My profile', 'link': 'profile' },
    { 'name': 'Settings', 'link': 'settings' },
    { 'name': 'My messages', 'link': 'messages' },
    { 'name': 'Notifications', 'link': 'notifications' }];
  mobileQuery: MediaQueryList;
  fillerNav = Array.from(this.sidenavList1);
  fillerContent = Array.from({ length: 6 }, () =>
    ` --text content-- `);
  private _mobileQueryListener: () => void;

  @ViewChild('snav') public sidenav: MatSidenav;
  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, private sidenavService: SidenavService) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnInit() {
    this.sidenavService.setSidenav(this.sidenav);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }
}

for the other sidenav you reproduce the same procedure ...

AppComponent

in the app.component.ts:

export class AppComponent {
  title = 'my-app';
  headerType: number;
  constructor() {
    this.newHeader(1);
  }

  newHeader(headerType: string) {
    this.headerType = headerType;
  }
}

in the app.component.html

<div [ngSwitch]="headerType">
  <div *ngSwitchCase="1">
    <app-sidenav-1></app-sidenav-1>
  </div>
  <div *ngSwitchCase="2">
    <app-sidenav-2></app-sidenav-2>
  </div>
  <div *ngSwitchDefault>
    Default content
    <router-outlet></router-outlet>
  </div>
</div>

Sergio Contreras Sustaita · Answer 2 · 2019-01-08T00:21:07.237

1

If your components are not directly related (for example routes), maybe you can use a service.

Service to share the drawer instance

@Injectable({
    providedIn: 'root'
})
export class DrawerService {
    private matDrawer: MatDrawer;

    setDrawer(drawer: MatDrawer) {
        this.matDrawer = drawer;
    }

    toggle() {
         this.matDrawer.toggle();
    }
}

Component that cointains the mat-drawer

export class WithDrawerComponent implements OnInit {
  @ViewChild(MatDrawer) matDrawer: MatDrawer;
  constructor(private drawerService: DrawerService) {

  }

  ngOnInit() {
    this.drawerService.setDrawer(this.matDrawer);
  }
}

Component that activate toggle with a button

export class WithButtonComponent implements OnInit {
  constructor(private drawerService: DrawerService) {
  }

  toggleDrawer() {
    this.drawerService.toggle();
  }
}

I hope it helps you

edited Jan 08 '19 at 00:21

answered Jan 05 '19 at 06:06

Sergio Contreras Sustaita

610
5
12

this is inside the toggle() – Aswin Kumar Jan 05 '19 at 07:22
The WithDrawerComponent coinains in its template the tag? Where are you providing the service, i just changed the parameter in the @Injectable directive, maybe it is related with that – Sergio Contreras Sustaita Jan 08 '19 at 00:21
1

There is another question with the same problem, his answer is more detailed https://stackoverflow.com/questions/48073057/angular-open-close-sidenav-from-another-component?rq=1 – Sergio Contreras Sustaita Jan 08 '19 at 00:23

Angular 6 - How to toggle sidenav from another component using button

2 Answers2