angular 4 "Cannot read property 'toggle' of undefined" while using *ngIf="sidemenuu == true" to side menu

Question

side-menu.html

<button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
<mat-icon>menu</mat-icon>
</button>
<span fxFlex></span>
<app-header></app-header>
 </mat-toolbar>
 <mat-sidenav-container class="example-sidenav-container" 
[style.marginTop.px]="mobileQuery.matches ? 0 : 0">
    <mat-sidenav #snav id="snav" class="dark-sidebar pl-xs" 
[mode]="mobileQuery.matches ? 'side' : 'over'" fixedTopGap="0" 
[opened]="mobileQuery.matches" [disableClose]="mobileQuery.matches" 
*ngIf="sidemenuu == true" >
        <app-sidebar  ></app-sidebar>
    </mat-sidenav>
    <mat-sidenav-content class="page-wrapper">
        <div class="page-content">
            <router-outlet>
                <app-spinner></app-spinner>
            </router-outlet>
        </div>
    </mat-sidenav-content>

 </mat-sidenav-container>

Here am seeing if location.path(); has indexOf('day') then sidemenuu to false

side-menu.ts

export class SideMenuComponent implements OnDestroy, AfterViewInit {
mobileQuery: MediaQueryList;
url = '';
public sidemenuu: boolean = false;
private _mobileQueryListener: () => void;

constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, 
location: Location, router: Router, public menuItems: MenuItems) {
this.mobileQuery = media.matchMedia('(min-width: 768px)');
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);
router.events.subscribe((val) => {
  this.url = location.path();
  this.sidemenuu = true;
  if (((this.url.indexOf('day')) > -1)) {
    this.sidemenuu = false;
  } else {
    this.sidemenuu = true;
    }
  });
 }

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

}

}

this is the error am getting for other paths

Error

SideMenuComponent.html:40 ERROR TypeError: Cannot read property 'toggle' of undefined

at Object.eval [as handleEvent] (SideMenuComponent.html:40)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at eval (core.js:10629)
at HTMLButtonElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4751)
at ZoneDelegate.invokeTask (zone.js:420)

It's because `snav` is undefined, where do you initialise it? — user184994, Jun 28 '18 at 06:45

score 8 · Answer 1 · edited Dec 27 '18 at 12:25

8

as your button is "outside" of mat-sidenav-container you can use ViewChild

//In component.ts
@ViewChild('sidenav') sidenav:any;
toggleSidenav()
  {
    this.sidenav.toggle();
    console.log(this.sidenav.toggle);
  }

//In your .html
<button mat-icon-button (click)="toggleSidenav()" value="sidebarclosed">

edited Dec 27 '18 at 12:25

Robin

43
5

answered Jun 28 '18 at 08:48

Eliseo

50,109
4
29
67

score 1 · Answer 2 · answered Nov 02 '20 at 20:07

1

For those that will follow up on this question adding to you component.ts will solve this error @ViewChild('sidenav') sidenav: any;

answered Nov 02 '20 at 20:07

Mr Guro

11
3

score 1 · Answer 3 · answered Nov 14 '20 at 16:21

1

it may be Viewchild problem ... sometimes viewchild need two parameters.. in this case you can user this..

 @ViewChild('blabla', {static: false})

answered Nov 14 '20 at 16:21

Mirac Bektas

115
1
2

angular 4 "Cannot read property 'toggle' of undefined" while using *ngIf="sidemenuu == true" to side menu

3 Answers3