Ugnius Malūkas Ugnius Malūkas - 1 month ago 20
TypeScript Question

Angular2 material control through component code

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

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