I want to start start.toggle()
function (which belongs to Angular 2 material md-sidenav-layout component) when test()
method is called.
How to call md-sidenav-layout start.toggle()
in app.component.ts?
app.component.html
<md-sidenav-layout class="sidenav" fullscreen>
<md-sidenav #start>
Start Side Drawer
<br>
<md-nav-list>
<a md-list-item [routerLink]="['']">Home</a>
<a md-list-item [routerLink]="['about']">About</a>
</md-nav-list>
<button md-button (click)="start.close()">Close</button>
</md-sidenav>
<div class="content">
<button md-button (click)="start.toggle()">Toggle Start Side Drawer</button>
<button md-button (click)="test()">Test Button</button>
<main>
<router-outlet></router-outlet>
</main>
<footer>
</footer>
</div>
</md-sidenav-layout>
app.component.ts
import {Component} from '@angular/core';
// what to import here?
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor() {
}
test() {
// how to call md-sidenav-layout start.toggle() properly here?
start.toggle();
}
}
Pass the object to your function, so you can use it.
<button md-button (click)="test(start)">Test Button</button>
in your component
test(start: any) {
start.toggle();
}