Change header content in the same component - Angular 2
<p>I would like to ask how to change the content of my header for example from Login Text to a Logout after successfully login based on token. My layout structure is I have a Main-Layout.component:</p>

<pre><code>&lt;app-header&gt;&lt;/app-header&gt;
&lt;div class="main-view"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;/div&gt;
</code></pre>

<p>That has a children component of Home and Login component. The routes is this:</p>

<pre><code>path: '',
        component: MainLayoutComponent,
        children: [
            { path: 'login', component: LoginComponent },
            { path: '', component: HomeComponent },
        ]
</code></pre>

<p>The content of  is this:</p>

<pre><code>&lt;ul class="nav navbar-nav navbar-right" *ngIf="!isLoggedIn"&gt;
                &lt;li&gt;&lt;a [routerLink]="['/login']"&gt;Log in&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a [routerLink]="['/signup']" class="btn btn--red"&gt;Sign up&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav navbar-right" *ngIf="isLoggedIn"&gt;
                &lt;li&gt;&lt;a (click)="logout()"&gt;Logout&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;

export class HeaderComponent implements OnInit {

    public isLoggedIn: boolean;

    constructor(
        private router: Router,
        private authenticationService: AuthenticationService
    ) {
        this.isLoggedIn = this.authenticationService.isLoggedIn();

    }
</code></pre>

<p>My problem is when I redirect to home page from login page since the two component is hosted on the same Main-Layout.component the  doesn't render again after redirect so the <code>this.isLoggedIn = this.authenticationService.isLoggedIn();</code> on the header.component instructor doesn't read again.</p>