Toggle sidenav from another component

[Eliran Cohen]

Hello, let's say I have 2 different components:

1. SidenavComponent: Sidenav HTML & angular 2 logic

2. MainMenuComponent: Main Menu Html & Angular 2 logic

Question 1:

I need a way to access and toggle the SidenavComponent sidenav from my MainMenuComponent. How to do so?

Question 2:

Any directive to make the sidenav on screen's full height and not only heighted as equals to the height of:

</md-sidenav>


//Sidenav height equals the height of this text


</md-sidenav-layout>

[Chok Yip]

You can use ChildComponent

https://yakovfain.com/2016/04/19/angular-2-exposing-child-components-api/

In parent component of Sidenav Layout, define 

export class AppComponent {
  @ViewChild('start') start:MdSidenav;

[Nico Habets]

Hi Chok or Eliran,

Can you tell me how to access the toggle() from the child component?

Thank You,

Nico

Op woensdag 1 juni 2016 15:22:51 UTC+2 schreef Chok Yip:

[Benevides Chissanga]

You can use @Output with EventEmmiter, something like this:

in view main component

<md-sidenav #sidenav mode="side">
   
</md-sidenav>
<header>
    <sd-navbar (openNav)="toggleNav()"></sd-navbar>
</header>

mainComponent.ts

@ViewChild('sidenav') sideNav:any;
private toggleNav:any;
constructor() {

}
ngAfterViewInit():any {
    
    this.toggleNav= ()=>{
        this.sideNav.toggle();
    }

} 

 IN Another component that you have the button to toggle, you can do like this:
anotherComponent.html

<button (click)="openSideNav($event)" class="navbar-toggler" type="button" *ngIf="navigationUrl!=='/' && navigationUrl!=='/login'">
    ☰
</button>

AnotherComponent.ts

@Output() openNav = new EventEmitter();
openSideNav(e:any) {
    this.openNav.emit(e);
}

[Kyle Thomas]

Benevides,

What is needed to accomplish this when I have this scenario:

<sd-sidenav></sd-sidenav> <---- How do I get it to listen to the toggle?

<header>
    <sd-navbar (openNav)="toggleNav()"></sd-navbar>
</header>

When I move the code into the sd-sidenav component I receive:

caused by: self.context.toggleNav is not a function

[kth...@avioconsulting.com]

Disregard the question.

I am leveraging a service to accomplish this functionality.