title: Show header links upon login in angular 6
body: <p>I am new to angular 6. And I am trying to achieve a requirement where I am loading header, login and footer on starting the application.</p>
  
  <p>App.component.html</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;!-- Footer Selector--&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>In AppComponent.TS, I am navigating to login page. So, on the application start login component is also displayed.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from "@angular/router";
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
  
    showLinks = false;
  
    constructor(private _router: Router) {
  
    }
  
    ngOnInit() {
      this._router.navigate(['./login']);
    }
  </code></pre>
  
  <p>So, in AppHeaderComponent, there are few header links(<strong>app-header-links</strong>) that needs to be displayed only after successful login.
  But I am unable to figure it out in achieving it. I tried it using <strong>@Output()</strong> also but still unable to achieve it.</p>
  
  <p>Header.component.html</p>
  
  <pre><code>div class="page-container"&gt;
    &lt;div class="navbar navbar-inverse navbar-fixed-top megamenu" style="width: 100%; background-color: #9dbfe0 !important;"&gt;
      &lt;div class="container" style="font-size:14px !important; display: block"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;img src="Images/logo.png" style="float:left !important;" /&gt;
          &lt;!--&lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;--&gt;
          &lt;!--&lt;/button&gt;--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;app-header-links&gt;&lt;/app-header-links&gt;
      &lt;!--&lt;a href="#" routerLink="/login"&gt;&lt;span style="float: right !important; font-weight: bold;color: black"&gt; Login &lt;/span&gt;&lt;/a&gt;--&gt;
    &lt;/div&gt;
    &lt;div id="main" class="navbar_Sitemap navbar-inverse-greyhead top-left"&gt;
      &lt;div class="container" style="font-size: 11px !important;font-family: 'open sans';font-weight: bold !important;"&gt;
        &lt;ol class="breadcrumb" style="background-color:#DCDCDC !important;"&gt;
          &lt;li class="breadcrumb-item" style="color: black"
              *ngFor="let item of breadcrumbList; let i = index"
              [class.active]="i===breadcrumbList.length-1"&gt;
            &lt;a [routerLink]="item.path" *ngIf="i!==breadcrumbList.length-1" style="color: black; font-weight: bold !important"&gt;
              {{ item.name }}
            &lt;/a&gt;
            &lt;span *ngIf="i===breadcrumbList.length-1"&gt; {{ item.name }}&lt;/span&gt;
          &lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HeaderLinksComponent.TS</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-header-links',
    templateUrl: './header-links.component.html',
    styleUrls: ['./header-links.component.css']
  })
  export class HeaderLinksComponent implements OnInit {
    constructor() { }
    ngOnInit() {
    }
  }
  </code></pre>
  
  <p>Login.component.html</p>
  
  <pre><code>&lt;div class="site__container" id="popup_box"&gt;
    &lt;form class="form--login form-group"
          novalidate
          (ngSubmit)="onSubmit(txtUsernameTRV.value,txtPasswordTRV.value)"
          #loginForm&gt;
      &lt;div class="grid__container"&gt;
        &lt;div class="form__field"&gt;
          &lt;img src="Images/logo.png" /&gt;
        &lt;/div&gt;
        &lt;div class="form__field"&gt;
          &lt;label class="fa fa-user" for="login__username"&gt;&lt;span class="hidden"&gt;Username&lt;/span&gt;&lt;/label&gt;
          &lt;input type="text"
                 class="form__input"
                 id="txtUsername"
                 placeholder="Username"
                 required="required"
                 ngModel name="txtUsername"
                 #txtUsernameTRV="ngModel"
                 (keyup)="logUserName(txtUsernameTRV.value)" /&gt;
          &lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="form__field"&gt;
          &lt;label class="fa fa-lock" for="login__password"&gt;&lt;span class="hidden"&gt;Password&lt;/span&gt;&lt;/label&gt;
          &lt;input type="text"
                 placeholder="Password"
                 class="form__input"
                 required="required"
                 autocomplete="off"
                 id="txtPassword"
                 ngModel name="txtPassword"
                 #txtPasswordTRV="ngModel"
                 (keyup)="logPassword(txtPasswordTRV.value)" /&gt;
          &lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="form__field"&gt;
          &lt;button type="submit"
                  class="btn btn-Orange btn-sm _btn"
                  id="BtnSubmit"
                  [disabled]="!(txtUsernameTRV.valid &amp;&amp; txtPasswordTRV.valid)" routerLink="dashboard" &gt;
            Login
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Login.component.ts</p>
  
  <pre><code>onSubmit(txtUsername: string, txtPassword: string) {
  
      this._router.navigate(['./dashboard']);
    }
  </code></pre>
  
  <p>Is there an approach to display the app-header-links upon login, else they shouldn't be displayed.
  Could anyone help me 
  Please, Thanks in advance</p>