I am trying to sidenav toggle from another ponent, however when the .toggle() function gets called from my parent ponent it throws this error:

AppComponent.html:1 ERROR TypeError: this.sidenav.toggle is not a function at AppComponent.webpackJsonp.176.AppComponent.toggleNav (appponent.ts:25)

here is the code: appponent.ts

import { Component, ViewChild } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { NavComponent } from './nav/navponent';
import { SidebarComponent } from './sidebar/sidebarponent';
import { FooterComponent } from './footer/footerponent';
import { MdSidenav } from '@angular/material';
@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: './appponent.html',
    styleUrls: ['./appponent.scss']
})
export class AppComponent{
    title = 'CRS Management App';
    @ViewChild('sidenav') sidenav:MdSidenav;
    toggleNav(){
      this.sidenav.toggle();
    }
}

appponent.html:

<app-nav #navbar (nav)="toggleNav()"></app-nav>
<app-sidebar #sidenav></app-sidebar>
<app-footer></app-footer>

the (nav) is emitted from the app-nav ponent.

sidebarponent.ts:

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebarponent.html',
  styleUrls: ['./sidebarponent.scss']
})
export class SidebarComponent {
    title = 'CRS';

  constructor() { }

}

sidebarponent.html:

 <md-sidenav-container class="container">
<!--SIDEBAR -->
    <md-sidenav #sidebar class="sidebar" mode="over" opened="true">

        <!-- MENU  -->
         <div class="nav-links">
            <md-nav-list> <!--TODO Links -->
               <a md-list-item href="/one"> Option </a> <!--TODO Icon -->
               <a md-list-item href="/two"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/three"> Option </a> <!--TODO Icon-->
               <span class="flex"></span><!--TODO Divider-->
               <a md-list-item href="/four"> _______ </a> <!--TODO Icon-->
               <a md-list-item href="/five"> Option </a> <!--TODO Icon -->
               <a md-list-item href="/six"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/seven"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/eight"> Option </a> <!--TODO Icon-->
            </md-nav-list>
        <!-- SETTINGS -->
            <!--TODO link to settings -->
            <!--TODO Convert to md-list-item -->
            <button md-button class="md-icon-button" aria-label="Settings">
                Settings<md-icon>settings</md-icon> 
            </button>
        <!-- SETTINGS END -->
        </div>

    </md-sidenav>
<!-- SIDEBAR ENDS -->
<router-outlet></router-outlet>
</md-sidenav-container>

I have tried using AfterViewInit, it throws:

ERROR TypeError: this.sideNav.toggle is not a function at AppComponent.webpackJsonp.176.AppComponent.toggleNav (http://127.0.0.1:4200/main.bundle.js:171:22)

I am trying to sidenav toggle from another ponent, however when the .toggle() function gets called from my parent ponent it throws this error:

AppComponent.html:1 ERROR TypeError: this.sidenav.toggle is not a function at AppComponent.webpackJsonp.176.AppComponent.toggleNav (app.ponent.ts:25)

here is the code: app.ponent.ts

import { Component, ViewChild } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { NavComponent } from './nav/nav.ponent';
import { SidebarComponent } from './sidebar/sidebar.ponent';
import { FooterComponent } from './footer/footer.ponent';
import { MdSidenav } from '@angular/material';
@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: './app.ponent.html',
    styleUrls: ['./app.ponent.scss']
})
export class AppComponent{
    title = 'CRS Management App';
    @ViewChild('sidenav') sidenav:MdSidenav;
    toggleNav(){
      this.sidenav.toggle();
    }
}

app.ponent.html:

<app-nav #navbar (nav)="toggleNav()"></app-nav>
<app-sidebar #sidenav></app-sidebar>
<app-footer></app-footer>

the (nav) is emitted from the app-nav ponent.

sidebar.ponent.ts:

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.ponent.html',
  styleUrls: ['./sidebar.ponent.scss']
})
export class SidebarComponent {
    title = 'CRS';

  constructor() { }

}

sidebar.ponent.html:

 <md-sidenav-container class="container">
<!--SIDEBAR -->
    <md-sidenav #sidebar class="sidebar" mode="over" opened="true">

        <!-- MENU https://material.angular.io/ponents/ponent/list -->
         <div class="nav-links">
            <md-nav-list> <!--TODO Links -->
               <a md-list-item href="/one"> Option </a> <!--TODO Icon -->
               <a md-list-item href="/two"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/three"> Option </a> <!--TODO Icon-->
               <span class="flex"></span><!--TODO Divider-->
               <a md-list-item href="/four"> _______ </a> <!--TODO Icon-->
               <a md-list-item href="/five"> Option </a> <!--TODO Icon -->
               <a md-list-item href="/six"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/seven"> Option </a> <!--TODO Icon-->
               <a md-list-item href="/eight"> Option </a> <!--TODO Icon-->
            </md-nav-list>
        <!-- SETTINGS -->
            <!--TODO link to settings -->
            <!--TODO Convert to md-list-item -->
            <button md-button class="md-icon-button" aria-label="Settings">
                Settings<md-icon>settings</md-icon> 
            </button>
        <!-- SETTINGS END -->
        </div>

    </md-sidenav>
<!-- SIDEBAR ENDS -->
<router-outlet></router-outlet>
</md-sidenav-container>

I have tried using AfterViewInit, it throws:

ERROR TypeError: this.sideNav.toggle is not a function at AppComponent.webpackJsonp.176.AppComponent.toggleNav (http://127.0.0.1:4200/main.bundle.js:171:22)

• javascript
• angular
• angular-material

• use @ViewChild(MdSidenav) sidenav:MdSidenav and call in the AfterViewInit lifecycle hook. – Ahmed Musallam Commented Apr 24, 2017 at 21:44
• Can you post your template code? – snorkpete Commented Apr 24, 2017 at 21:48
• @snorkpete '<app-nav #navbar (nav)="toggleNav()"></app-nav> <app-sidebar #sidenav></app-sidebar> <app-footer></app-footer>' the (nav) event is ing from a separate ponent, – Nicholas Foden Commented Apr 24, 2017 at 22:19
• can you update your actual question? ments aren't the best place to put code samples. And you have #sidenav reference variable for an <app-sidebar> ponent. is this your own custom ponent? – snorkpete Commented Apr 24, 2017 at 22:24
• Thankyou for your replies. I have tried the AfterViewInit previously, it just gives a different location for the same error ERROR TypeError: this.sideNav.toggle is not a function at AppComponent.webpackJsonp.176.AppComponent.toggleNav (http://127.0.0.1:4200/main.bundle.js:171:22) – Nicholas Foden Commented Apr 24, 2017 at 22:27

3 Answers 3

The template ref #sidenav on the AppComponent refers to the SidebarComponent which does not have a toggle function.

You could add one to it which then calls the sidenav.toggle() and then you could call that from the AppComponent.

sidebar.ponent.ts

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

  @Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.ponent.html',
    styleUrls: ['./sidebar.ponent.css']
  })
  export class SidebarComponent implements OnInit {
    title = 'CRS';
    @ViewChild('sidenav') sidenav: MatSidenav;
    constructor() { }

    ngOnInit() {
    }

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

sidebar.ponent.html

  <md-sidenav-container class="container">
    <md-sidenav #sidenav class="sidebar" mode="over" opened="true">
    ...

    </md-sidenav>      
 </md-sidenav-container>

In my case I didn't include MatSidenavModule in my ponent module imports list. That solved the problem. It looks like some other Material module has indirectly imports the SidenaveModule, that is the reason we didn't get the usual error when we don't import the module in our ponent.

Try to use ngAfterViewInit callback, here's a good example.