title: Display logout menu after login from another component?
body: <p>I want to enable display the logout button after login from <code>detailed-page.component.ts</code>. The Join Us/Logout menu is in header compoent.</p>
  
  <p>This is i have tried. But after login not enable the logout menu. How to fix this issue?.</p>
  
  <p><strong>header.component.html</strong></p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;                                       
       &lt;li class="loginmenu joinusmenu" (click)="showmodel('register');" *ngIf="loginStatus==0" &gt;&lt;span&gt;Join Us&lt;/span&gt;&lt;/li&gt;
       &lt;li class="loginmenu joinusmenu" (click)="logout();" *ngIf="loginStatus==1"&gt;&lt;span&gt;Logout&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>detailed-page.component.ts</strong></p>
  
  <pre><code>constructor(
  
      private headerComponent: HeaderComponent
  
  ) {}
  
  login() {
  
      this.loading = true;
      this.authenticationService.login(this.model.username, this.model.lpassword)
          .subscribe(
                  data =&gt; {
                  this.headerComponent.loginStatus= 1;
                  })
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>    @Component({ 
        selector: 'my-app',
        template: `
          &lt;app-header&gt;&lt;/app-header&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;    
          &lt;app-footer&gt;&lt;/app-footer&gt;`,
        styleUrls: ['../app/app.component.css'],
      })
  
      export class AppComponent { 
  
      }
  </code></pre>