title: How to trigger local reference in parent component from child component event in Angular 2?
body: <p>I am trying to work out how to trigger a local reference in a parent component template i.e. <code>#rightNav</code> from a child component template click event <code>(click)="rightNav.open()"</code> using <a href="https://github.com/angular/material2/tree/master/src/demo-app/sidenav" rel="nofollow">Material 2 sidenav</a>. I think I need to use the <code>@ViewChild</code> annotation, but not sure how.</p>
  
  <p><strong>Child component template (app-conditions-list):</strong></p>
  
  <pre><code>&lt;div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
              (click)="rightNav.open()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Parent component template (condition component):</strong></p>
  
  <pre><code>import { Component} from '@angular/core';
  import { ConditionsListComponent } from './listComponent/conditions-list.component';
  
  
  @Component({
      moduleId: module.id,
      selector: 'app-conditions',
      template: `
              &lt;md-sidenav #rightNav align="end" mode="side"&gt;
              "Condition details will open here on click event"
              &lt;/md-sidenav&gt;
              &lt;app-conditions-list&gt;&lt;/app-conditions-list&gt;`,
      styleUrls: ['./conditions.component.css'],
      directives: [
          ConditionsListComponent,
      ]
  })
  
  export class ConditionsComponent  {
      title = "Conditions Manager"
  }
  </code></pre>
  
  <p>The child component is nested in the parent component template.
  Thanks!</p>