title: Hiding navigation bar from login page in angular 4
body: <p>I had downloaded angular 4 template, In that they provide navigation elements in the app.component.html. i wanted to display only my login page as my default page and hide the navigation part.how to hide the navigation before login?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!---App.component.html--&gt;[enter image description here][1]
  
  &lt;div class="bg-dark" *ngIf="layout == 'empty-view-1'"&gt;&lt;/div&gt;
  &lt;sample-modals *ngIf="controller == 'notifications' &amp;&amp; view == 'modals' "&gt;&lt;/sample-modals&gt;
  &lt;right-sidebar-1 *ngIf="  layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2'"&gt;&lt;/right-sidebar-1&gt;
  &lt;navbar-1 *ngIf="  layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2'"&gt;&lt;/navbar-1&gt;
  &lt;top-navigation-1 *ngIf=" layout == 'top-navigation-1'"&gt;&lt;/top-navigation-1&gt;
  &lt;jumbotron-2 *ngIf="  layout == 'top-navigation-2'"&gt;&lt;/jumbotron-2&gt;
  &lt;top-navigation-2 *ngIf="layout == 'top-navigation-2'"&gt;&lt;/top-navigation-2&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
     &lt;div class="left-sidebar-placeholder" *ngIf="layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2'"&gt;&lt;/div&gt;
     &lt;left-sidebar-1 *ngIf=" layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2'"&gt;&lt;/left-sidebar-1&gt;
     &lt;div class="col main"&gt;
      &lt;jumbotron-1 *ngIf=" controller != 'dashboards' &amp;&amp; (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1')"&gt;&lt;/jumbotron-1&gt;
      &lt;div class="page"&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;backdrops&gt;&lt;/backdrops&gt;</code></pre>
  </div>
  </div>
  </p>