Components: Sidenav is not working under ngIf control.

Created on 8 Dec 2016 · 2Comments · Source: angular/components

If the md-sidenav is under ngIf control, I'm getting "Cannot read property 'open' of undefined" when I want to open the sidenav.

Plunker: http://plnkr.co/edit/yEUe7pUZrbhZgfRTHclx?p=preview

Source

greg-md

Most helpful comment

This is a limitation of ngIf (see https://github.com/angular/angular/issues/6179)

You can work around it by using @ViewChildren:

@ViewChildren('start') sc: QueryList<MdSidenav>;

<md-sidenav-container>
  <md-sidenav #start *ngIf="true">Hi</md-sidenav>
  <button md-button (click)="sc.first.open()">open</button>
</md-sidenav-container>

mmalerba on 15 Dec 2016

👍11 🎉6

All 2 comments

This is a limitation of ngIf (see https://github.com/angular/angular/issues/6179)

You can work around it by using @ViewChildren:

@ViewChildren('start') sc: QueryList<MdSidenav>;

<md-sidenav-container>
  <md-sidenav #start *ngIf="true">Hi</md-sidenav>
  <button md-button (click)="sc.first.open()">open</button>
</md-sidenav-container>

mmalerba on 15 Dec 2016

👍11 🎉6

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}