Angular2 material control through component code

Question

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

Answer 1

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