title: Angular 6: How can I hide header when I click on login?
body: <p>I want show and hide header component from login container. When I click on "Angular &amp; Bootstrap" text. It's working but not working from login component. I am currently working in Angular 6. Is there any other way for doing this?</p>
  
  <p>Header Component html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-dark bg-dark mb-5" *ngIf="login"&gt;
   &lt;a class="navbar-brand" routerLink="" href="#" (click)="ngToggleheader()"&gt;Angular &amp; Bootstrap&lt;/a&gt;&lt;/nav&gt;
  </code></pre>
  
  <p>Header Component ts file </p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { AuthGuard } from '../../_guards/';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
    login: boolean;
    constructor(public navCtrl: Router, public auth: AuthGuard) {
      this.login = auth.checkLogin();
    }
  
    ngOnInit() {
      this.login = this.auth.checkLogin();
    }
  
    ngToggleheader(){
      this.login = (this.login) ? false : true;
    }
  
    logout() {
      this.login = false;
      localStorage.removeItem('currentUser');
      this.navCtrl.navigate(['/login'], {});
    }
  
  }
  </code></pre>
  
  <p>Login page ts</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { HeaderComponent } from '../ui/header/header.component';
  
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
    constructor(public navCtrl: Router, public header: HeaderComponent) {
  
    }
  
    ngOnInit() {
    }
  
    logintry() {
      //localStorage.setItem( 'currentUser' , 'true' );
      this.header.ngToggleheader();
    //  this.navCtrl.navigate(['/home'], {});
    }
  }
  </code></pre>
  
  <p>Login html</p>
  
    <pre class="lang-html prettyprint-override"><code> &lt;div class="login-container"&gt;
    &lt;div class="loginForm"&gt;
      &lt;form&gt;
        &lt;div class="hgroup"&gt;
          &lt;img src="../../assets/images/logo-login.png" width="150" alt="" /&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
        &lt;div class="group"&gt;
          &lt;input type="text" placeholder="Username"&gt;
  
        &lt;/div&gt;
        &lt;div class="group"&gt;
          &lt;input type="password" placeholder="Password"&gt;
        &lt;/div&gt;
        &lt;a (click)="logintry()" class="buttonui"&gt;SIGN IN&lt;/a&gt;
  
      &lt;/form&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please help.</p>