title: How to Hide/Show button in Index page of Angular 6 app?
body: <p>I am new to <code>Angular 6</code>. I am working on a backend admin panel that requires the users to login first to get access to the application features. </p>
  
  <p>Everything is working fine, but I am stuck in one thing. I have put my </p>
  
  <blockquote>
    <p>Logout</p>
  </blockquote>
  
  <p>button on the index page of the Angular 6 app. </p>
  
  <p>Problem is the <code>Logout button</code> also be shown on the <code>login page</code>. I need to hide that button.</p>
  
  <p>Index.html</p>
  
  <pre><code>...
  &lt;body&gt;
  &lt;div class="logo-top"&gt;
  &lt;img src="/app/Content/Images/logo.png" class="logo"&gt;
  &lt;button *ngIf="nav.isShowLogoutButton" id="logoutButton" type="button" class="btn  btn-default btn-sm float-md-right center-block" style=" margin-right: 40px;margin-top: 20px;"&gt;
    &lt;span class="glyphicon glyphicon-log-out"&gt;&lt;/span&gt; Log out
  &lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have made NavbarService hide/show navigation bar in login and other pages. But I can't use <code>*ngIf="nav.isShowLogoutButton</code> as I think there is no component for the index page.</p>
  
  <p>Is there any way to hide/show HTML elements in index page depending upon your choice in each subsequent components?</p>