Open/Close sidenav from another component

mat-sidenav
angular 7 material sidenav example
mat-sidenav autofocus
mat-sidenav width
mat-sidenav position
angular material sidenav api
mat-sidenav not showing
angular material sidenav below toolbar

I use angular (latest version) and angular material.

There are 3 components:

  • header.component, in which there is a control button for right-sidenav
  • rigth-sidenav.component, in which is the right-sidenav
  • sidenav.component (this is the left main menu), this component calls header.component, right-sidenav.component and content

How to open / close sidenav from another component ? (in my case, the button is in header.component).

Tried the following option (but got the error: TypeError: this.RightSidenavComponent.rightSidenav is undefined):

header.component.html

<button mat-button (click)="toggleRightSidenav()">Toggle side nav</button>

header.component.ts

import { Component } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

    constructor(public RightSidenavComponent:RightSidenavComponent) {   }
    toggleRightSidenav() {
        this.RightSidenavComponent.rightSidenav.toggle();
    }

}

sidenav.component.html

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #sidenav mode="side" opened="true" class="sidenav"
                 [fixedInViewport]="true"> Sidenav  </mat-sidenav>
    <mat-sidenav-content>
        <app-header></app-header>
        <router-outlet></router-outlet>
        <app-right-sidenav #rSidenav></app-right-sidenav>
    </mat-sidenav-content>
</mat-sidenav-container>

sidenav.component.ts

import { Component, Directive, ViewChild } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component';

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss']
})

export class SidenavComponent {

    @ViewChild('rSidenav') public rSidenav;
    constructor(public RightSidenavComponent: RightSidenavComponent) {
        this.RightSidenavComponent.rightSidenav = this.rSidenav;
    }

}

right-sidenav.component.html

<mat-sidenav #rightSidenav mode="side" opened="true" class="rightSidenav"
             [fixedInViewport]="true" [fixedTopGap]="250">
    Sidenav
</mat-sidenav>

right-sidenav.component.ts

import { Component, Injectable } from '@angular/core';

@Component({
  selector: 'app-right-sidenav',
  templateUrl: './right-sidenav.component.html',
  styleUrls: ['./right-sidenav.component.scss']
})

@Injectable()
export class RightSidenavComponent {

    public rightSidenav: any;

    constructor() { }

}

Non-working sample with code stackblitz


I had the same problem using. I resolved it like this.

SidenavService

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

@Injectable()
export class SidenavService {
    private sidenav: MatSidenav;


    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();
   }

Your Component

constructor(
private sidenav: SidenavService) { }

toggleRightSidenav() {
   this.sidenav.toggle();
}

Bind your html toggle() based on your requirement.

App component.

@ViewChild('sidenav') public sidenav: MatSidenav;

constructor(private sidenavService: SidenavService) {
}

ngAfterViewInit(): void {
  this.sidenavService.setSidenav(this.sidenav);
}

App Module

providers: [YourServices , SidenavService],

Working sample with code stackblitz

Angular 9+ Update

Per this answer on SO, "Components can no longer be imported through @angular/material. Use the individual secondary entry-points, such as @angular/material/button." As such, make sure to import MatSidenav like so:

import { MatSidenav } from '@angular/material/sidenav';

angular-material-toggle-sidenav-in-another-component, Close saved. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. import { Component } from '@angular/​core';. @Component({. selector: 'app-root',. templateUrl: './app.component.html',. Open/Close sidenav from another component. I use angular (latest version) and angular material. There are 3 components: header.component, in which there is a control button for right-sidenav. rigth-sidenav.component, in which is the right-sidenav.


I used @Input() inputSideNav: MatSideNav in parent\ another component to pass the sideNav object as target property from child component. It works as expected. By the way, I liked the service implementation by @Eldho :)

Child.component.html

<app-layout-header [inputSideNav]="sideNav"></app-layout-header>
<mat-sidenav-container>
  <mat-sidenav #sideNav (click)="sideNav.toggle()" mode="side">
    <a routerLink="/">List Products</a>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

layout-header.component.html

<section>
  <mat-toolbar>
    <span (click)="inputSideNav.toggle()">Menu</span>
  </mat-toolbar>
</section>

layout-header.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { MatSidenav } from '@angular/material';

@Component({
  selector: 'app-layout-header',
  templateUrl: './layout-header.component.html',
  styleUrls: ['./layout-header.component.css']
})
export class LayoutHeaderComponent implements OnInit {
  @Input() inputSideNav: MatSidenav;

  constructor() { }

  ngOnInit() {
  }
}

[Sidenav] Open sidenav from another component · Issue #2936 , [Sidenav] Open sidenav from another component #2936. Closed. marianharbist opened this issue on Feb 4, 2017 · 30 comments. Closed  md-sidenav inside the sidenav.component has sidenav.open() and sidenav.close(), but erroring out since 'custom sidenav doesn't have property sidenav or sidenav.open" 👍 1 This comment has been minimized.


First of all, you don't need to toggle the right sidenav in the sidenav component. Your toggle button is in the header component, so you can do this in your header component.

header.component.ts

import { Component } from '@angular/core';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  rightSidenav: boolean;
  constructor(public RightSidenavComponent:RightSidenavComponent) { }

  toggleRightSidenav() {
    this.rightSidenav = !this.rightSidenav;
  }
}

And in your header.component.html, use this code:

<app-right-sidenav *ngIf="rightSideNav"></app-right-sidenav>

This will make your work easy.

Open/Close sidenav from another component – Icetutor, Open/Close sidenav from another component. header. component, in which there is a control button for right-sidenav. rigth-sidenav. component, in which is the right-sidenav. sidenav. component (this is the left main menu), this component calls header. component, right-sidenav. component and content. The sidenav service needs a reference to the side nav in your application so that it can open/close it. The InstellingenComponent component needs to do this since this is the component that has the sidenav.


Angular - Open/Close sidenav from another component, I use angular (latest version) and angular material. There are 3 components: header.component, in which there is a control button for right-sidenav  I am new to Angular 2. How to open a sidenav using mat component in Angular2. I am using this site but cannot resolve the issue. I have two different components Header, Sidebar. The toggle button is in Header component and sidenav is different component.


Angular 6, I also have a service which allows to open/close the modal instance. I am using ngbModal. The modal Content template needs to show/hide some fields based on  Open sidenav from anothor component : Angular2. r/Angular2: Angular is Google's open source framework for crafting high-quality front-end web applications. r/Angular2 exists to help spread news …. Press J to jump to the feed.


Toggle sidenav from another component, Hello, let's say I have 2 different components: 1. SidenavComponent: Sidenav HTML & angular 2 logic. 2. MainMenuComponent: Main Menu  SideNav basically uses 3 components to add sidenav into a full page. They are - <mat-sidenav-container> which acts as a structural container for content and sidenav, <mat-sidenav-content> which represents the main content, and <mat-sidenav> which represents the added side content.Following is a sample sidenav .html layout.