title: Access a component variable from another
body: <p>I'm trying to integrate sidenav to my application, but it required the sidenav code to be in the main app.component page while actually I need the sidenav only in one component.</p>
  
  <p>I have a variable called <strong>combos</strong>. if <code>combos.length &gt;=1</code>, I show the sidenav.</p>
  
  <p>That's the code I placed in my app.component.html:</p>
  
  <pre><code>    &lt;md-sidenav-layout&gt;
        &lt;md-sidenav #IVCombos mode="side" *ngIf="result?.combos?.length &gt;=1"&gt;
  MY SIDENAV
        &lt;/md-sidenav&gt;
  
      &lt;!-- Routed views go here --&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/md-sidenav-layout&gt;
  </code></pre>
  
  <p>As you can see, the content is wrapped within the sidenav. One the user place some data on my inputs on one of my router components, the <code>combos</code> variable changes.</p>
  
  <p>Since this variable is instance of a router component and not in my app.component.ts as in my HTML, the sidenav is not shown.</p>
  
  <p><strong>My question is:</strong></p>
  
  <p>What would be the best way to access my component <code>combos</code> variable from my app.component.ts?</p>
  
  <p>Is it neccessary to create a service for one variable in this case?</p>