title: Angular 4 Accessing elements from another component
body: <p>I am trying to create side-nav and toolbar. I want to create separate components for each so I have created 2 different components</p>
  
  <p>code for <code>&lt;app-sidenavmenu&gt;</code></p>
  
  <pre><code>&lt;md-sidenav-container class="sidenav-container"&gt;
      &lt;md-sidenav mode="push" class="sidenav" opened="false" #sidenav&gt;
          &lt;md-list&gt;
              &lt;md-list-item&gt;...&lt;/md-list-item&gt;
          &lt;/md-list&gt;
      &lt;/md-sidenav&gt;
  &lt;/md-sidenav-container&gt;
  </code></pre>
  
  <p>and code for <code>&lt;app-toolbar&gt;</code></p>
  
  <pre><code>&lt;md-toolbar&gt;
      &lt;span&gt;&lt;button md-button (click)="sidenav.toggle()"&gt;&lt;md-icon&gt;menu&lt;/md-icon&gt;&lt;/button&gt;&lt;/span&gt;
      &lt;span&gt;&lt;h2&gt;App name&lt;/h2&gt;&lt;/span&gt;
  &lt;/md-toolbar&gt;
  </code></pre>
  
  <p>and in third home component I am using above components</p>
  
  <p>
  </p>
  
  <p>Now I wanted to access <code>#sidenav</code> from side-nav component to toolbar component so that side-nav will be toggle with toggle function</p>
  
  <p>How to achieve this.</p>