title: Navigation Bar disappears - Angular 7
body: <p>Basically I am building a web-page which starts with a login screen and after clicking on the login button, navigation bar appears. Now when i select an item from navigation drop-down menu, the next components data appears but the navigation bar disappears.</p>
  
  <p>NOTE: I don't want navigation bar on login screen, so can't include its selector in app.component.html</p>
  
  <p><strong>App.component.html</strong></p>
  
  <pre><code> &lt;div class="background-image"&gt;
   &lt;router-outlet&gt;&lt;/router-outlet&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>login.component.html</strong></p>
  
  <pre><code>    &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;div class="content2"&gt;
  
      &lt;h2 &gt;Login&lt;/h2&gt;
      &lt;br&gt;
  
      &lt;form&gt;
      &lt;div class="form-group"&gt;
      &lt;label style="margin: 5px"&gt;Username&lt;/label&gt;
  
      &lt;input type="text"  /&gt;
  
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
      &lt;label style="margin: 7.5px"&gt;Password&lt;/label&gt;
  
       &lt;input type="password" /&gt;
  
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
      &lt;button (click)="onclick()" [disabled]="loading" class="btn btn- 
       primary"&gt;Login&lt;/button&gt;
      &lt;a routerLink="/register" class="btn btn-link"&gt;Register&lt;/a&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>navbar.component.html</strong></p>
  
  <pre><code> &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
     &lt;a class="navbar-brand" href="#"&gt;WelfarePortal&lt;/a&gt;
     &lt;button class="navbar-toggler" type="button" data-toggle="collapse" 
     data-target="#navbarSupportedContent" aria- 
     controls="navbarSupportedContent" aria-expanded="false" aria-l 
     abel="Toggle navigation"&gt;
     &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
       &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
     &lt;ul class="navbar-nav mr-auto"&gt;
  
  
       &lt;li class="nav-item active dropdown"&gt;
       &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
      role="button" data-toggle="dropdown" aria-haspopup="true" aria- 
       expanded="false"&gt;
        ID Card
      &lt;/a&gt;
      &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
        &lt;a class="dropdown-item" routerLink="/idcardReg"&gt;Apply ID Card&lt;/a&gt;
        &lt;a class="dropdown-item" routerLink="/idcardStatusView"&gt;View ID Card 
        Status&lt;/a&gt;
        &lt;a class="dropdown-item" routerLink="/idcardCreate"&gt;Create ID 
      Card&lt;/a&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;   
       &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown active"&gt;
      &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
        role="button" data-toggle="dropdown" aria-haspopup="true" aria- 
      expanded="false"&gt;
        Pass
      &lt;/a&gt;
      &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Apply Pass&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;View Pass Status&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;View Pass History&lt;/a&gt;
       &lt;/div&gt;
        &lt;/li&gt;
       &lt;/ul&gt;
         &lt;form class="form-inline my-2 my-lg-0"&gt;
       &lt;input class="form-control mr-sm-2" type="search" 
       placeholder="Search" aria-label="Search"&gt;
        &lt;button class="btn btn-outline-success my-2 my-sm-0" 
       type="submit"&gt;Search&lt;/button&gt;
        &lt;/form&gt;
     &lt;/div&gt;
  
     &lt;/nav&gt;
  </code></pre>