How to access template reference variables from parent in a child?

Question

I am trying to get my head around Angular2 and Typescript respectively. What I want to do is open a sidenav from a button which is in a child component - here app-header.

I know I could open it with

<button mat-button (click)="sidenav.open()">Open sidenav</button>

but that would only work if I place this within the parent template as it references the template variable reference sidenav. However, as I said, I want to open it based on a click on a button of a child.

This would be my layout/app template:

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <!-- sidenav content -->
    Here comes the menu ..
  </mat-sidenav>

  <div>    
    <app-header>
      <!-- Application header -->
    </app-header>
  </div>

</mat-sidenav-container>

And this would be the header template:

<div>
  header for {{title}} works!
  <button mat-button (click)="sidenav.open()">Open sidenav</button>
</div>

Of course this fails because I cannot reference sidenav - so how can I access sidenav from within the child correctly?

Or is passing on such references a "no no" in Angular2 and I should actually use an event based trigger or something like that?

Answer 1

this is normal parent / child component communication. The way you COULD do this is to just expose an output event on the child:

parent.component.html excerpt:

<child-component (openNav)="sidenav.open()"></child-component>

and in the child you just bind the button click to emitting that event:

child.component.ts:

@Output() openNav = new EventEmitter();

child.component.html:

<button (click)="openNav.emit()">Open Nav</button>

HOWEVER, since this is a sidenav that may need to be accessed in a lot of places and maybe even in nested places, you might just want to solve the problem for all situations and use a shared service observable:

side-nav.service.ts:

@Injectable()
export class SideNavService {
    private openNavSource = new Subject(); // never expose subjects directly
    openNav$ = this.openNavSource.asObservable();

    openNav = () => this.openNavSource.next();
}

provide it appropriately, and inject it into the parent and child for use

parent.component.ts:

@ViewChild('sidenav') sidenav; // get your template reference in the component
constructor(private sideNavService: SideNavService) { }
private sideNavSub;
ngOnInit() {
   this.sideNavSub = this.sideNavService.openNav$.subscribe(() => this.sidenav.open());
}
ngOnDestroy() {
   this.sideNavSub.unsubscribe(); //clean your subscriptions
}

child.component.ts:

constructor(private sideNavService: SideNavService) { }
openNav() {
   this.sideNavService.openNav(); // looks repetitive but accessing injectd services in templates is bad practice and will cause pains down the line
}

child.component.html:

<button (click)="openNav()">Open Nav</button>

then you can inject the service into any arbitrary component and use it as needed.