CODEWITHSUNDEEP
angularangular-materialangular-material2
Sami
Sami

Reputation: 1051

Material sidenav not showing backdrop when trigerred from another component

I am using angular material 2 with angular 5.

What I want to achieve is that on mobiles and tablets I want to have a hamburger kind of menu same like bootstrap. For That I am using angular material sidenav. I want to have a button when clicked it shows the sidenav.

Now I am putting this button which triggers the sidenav toggle in my app.component.html. I have created another component called nav-mobile.component.html inside the shared folder. In this component I am putting all the HTML that will show up in the menu.

So, according to documentation it should be something like this.

<mat-drawer-container>
  <mat-drawer #sidenav>
    asdasdasdas
  </mat-drawer>
  <mat-drawer-content>
    <button mat-button (click)="sidenav.toggle()">
      <i class="material-icons">menu</i> Menu
    </button>
    all other pages and related contents
  </mat-drawer-content>
</mat-drawer-container>

Which in my case is <app-nav-mobile></app-nav-mobile> another component instead of 

<mat-drawer #sidenav>
   asdasdasdas
</mat-drawer>

Now the Actual problem is that when I am moving my code to the nav-mobile component and toggling it with the service I can't see the backdrop or overlay which hides the remaining screen.

Please note that I also tried the mat-sidenav instead of mat-drawer. Also that the mat-drawer-content is not working when I am moving it to the child component. Current its working with the code given below. It is opening the subnav using the service but I am unable to see the backdrop when opened.

This is my app.component.html

<mat-drawer-container>
  <!--This has to show the backdrop/overlay-->
  <app-nav-mobile></app-nav-mobile>

    <div class="hamburger" fxHide.gt-md="true">
      <mat-toolbar>
        <button mat-button (click)="toggleMobileSidenav()">
          <i class="material-icons">menu</i> Menu
        </button>
      </mat-toolbar>
    </div>
    <app-home></app-home>

</mat-drawer-container>

this is my app.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { SidenavService } from './services/sidenav.service';
import { NavMobileComponent } from './shared/nav-mobile/nav-mobile.component';
import { MatSidenav } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

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


  constructor(private sidenavService: SidenavService) {
  }

    toggleMobileSidenav() {
      this.sidenavService.toggle();
    }
  ngOnInit(): void {
    //  this.sidenavService.setSidenav(this.sidenav);
  }
}

This is my service.

import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { NavMobileComponent } from '../shared/nav-mobile/nav-mobile.component';

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

}

this is my nav-mobile HTML.

<mat-drawer #sidenav>
  <div fxLayout="column">
    <button mat-button class="mobile-nav-link back-btn" (click)="close()">
      <i class="material-icons">keyboard_arrow_left</i> Back
    </button>
    <button mat-button class="mobile-nav-link">
      Deals
    </button>
  </div>
  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Personal data
        </mat-panel-title>
      </mat-expansion-panel-header>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
      <a mat-button routerLink=".">Link</a>
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Self aware panel
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div fxLayout="column">
        <a mat-button class="mobile-nav-link" routerLink=".">Link This</a>
        <a mat-button class="mobile-nav-link" routerLink=".">Dry Fruits</a>
        <a mat-button class="mobile-nav-link" routerLink=".">Peshawari Chappal</a>
      </div>
    </mat-expansion-panel>
  </mat-accordion>

</mat-drawer>

this is my nav-mobile.ts.

import { Component, OnInit,ViewChild } from '@angular/core';
import { SidenavService } from '../../services/sidenav.service';
import { MatSidenav } from '@angular/material';

@Component({
  selector: 'app-nav-mobile',
  templateUrl: './nav-mobile.component.html',
  styleUrls: ['./nav-mobile.component.css']
})
export class NavMobileComponent implements OnInit {
  @ViewChild('sidenav') public sidenav: MatSidenav;

  constructor(private sidenavService: SidenavService) { }

  ngOnInit(): void {
   // console.log(this.sidenav);
    this.sidenavService.setSidenav(this.sidenav);
  }

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

}

Upvotes: 2

Views: 5086

Answers (1)

G. Tranter
G. Tranter

Reputation: 17958

Wrapping <mat-drawer> or <mat-sidenav> in a custom component is not currently supported. See https://github.com/angular/material2/issues/9438#issuecomment-358370971 for details.

Upvotes: 4

Related Questions