title: boolean var returning undefined after calling that variable form different component
body: <p>There are 2 components i.e header and login.
  If the value of loginU returns true then I want to show logout button in header comp. In console its showing boolean as undefined in header comp.</p>
  
  <p>login comp.ts:</p>
  
  <pre><code>  public isloggedin: boolean;
  
    loginU(e) {
      e.preventDefault();
      console.log(e);
      const username = e.target.elements[0].value;
      const password = e.target.elements[1].value;
      console.log(username, password);
  
  
      if (username === 'admin' &amp;&amp; password === 'admin') {
        console.log(e);
        this.isloggedin = true;
        this.router.navigate(['/dashboard']);
        return this.isloggedin
      } else {
        this.loginStatus = 'Invalid Username/Password';
  
      }
    }
  </code></pre>
  
  <p>header comp:</p>
  
  <pre><code>import {LoginComponent} from '../login/login.component';
  
  constructor private _login: LoginComponent) { 
  
  ngOnInit() {
     console.log("From header " +  this._login.isloggedin)
  }
  </code></pre>
  
  <p>header.component.html:</p>
  
  <pre><code>      &lt;button *ngIf="_login.isloggedin" mat-button (click)="logout()" style="outline:none;margin-left: 5px;float: right;"&gt;
  
   &lt;/button&gt; 
  </code></pre>