title: Angular 4 Accessing dom of another component inside routering component
body: <p>I have created toolbar and related components in my app</p>
  
  <p>So here is layout I have created</p>
  
  <pre><code>&lt;div fxLayout="column"&gt;
      &lt;div&gt;
          &lt;app-platformbar &gt;&lt;/app-platformbar&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>platforbar component is common for all routing</p>
  
  <pre><code>&lt;md-toolbar color="primary" &gt;
      &lt;span&gt;&lt;h2&gt;{{Name}}&lt;/h2&gt;&lt;/span&gt;
      &lt;span *ngIf="showLogoutBtn"&gt;&lt;button md-raised-button color="warn" (click)="logout()"&gt;Logout&lt;/button&gt;&lt;/span&gt;
  &lt;/md-toolbar&gt;
  </code></pre>
  
  <p>Inside <strong>platforBar</strong> component I have created one logout button which I don't want show on login( component) router</p>
  
  <p>I have stored user object inside <strong>userservice</strong> to identify whether the user is logged in or not.</p>
  
  <p>based on logged in I want to hide logout button.</p>
  
  <p>So what I want to once user click on logout button from home router It will redirect it to login router but logout button from platformbar component is still there</p>
  
  <p>So I want to hide it on login router.</p>