How to populate variable from service after component has initialized angular2 - angular2-routing

Question

I have a routed application that loads and works fine aside from the fact that I have an *ngIf element that does not show up on route change UNLESS I reload the page. I have a token variable from a service class where I store it in local storage, and I want to show my logout button when the token is not null.
When the site loads, it sets the token value to null which hides the button (expected behavior) but when logging in and seeing the token to the guid, the variable doesn't show a token value unless I reload the page which reinitializes the header component.
Abbreviated code below.
Import { Component } from '#angular/core';
Import { globalService } from './shared/globalService';
#Component({
selector: 'header-ele',
template: ` <div *ngIf="loginToken != null"><button>logout</button></div>
<router-outlet></router-outlet>`
})
export class headerComponent {
loginToken:any;
constructor(globalService: globalService){
this.logonToken = globalService.getUser(); //this either returns null or a token string
}
}
Then I have another component that changes the route which all works fine
//I have all of my correct imports and all works
export class loginComponent {
login(){
// I pass login params and get success
this.globalService.setUser(returnedData.LogonToken)
}
}
And in globalService I set logonToken = returnedData.LogonToken, BUT the button in my headerComponent doesn't show up unless I reload the page. So, I'm wondering if there is a way to reinitialize the headerComponent on route change success to get the token from globalService in the constructor function, or if there is a better way to share that parameter between the globalService and the headerComponent.
Abbreviated code due to submitting from mobile, but should get the idea.
Still learning the ins-and-outs of angular 2.

Answer 1

Your problem is that this.logonToken is only getting the value once in the constructor. So when you logout, the user token in your globalService is really null but not reflected in your header.component. One solution is to use observables to your header component and subscribe to your globalService. Or you directly use the global service variable to your template like this
<div *ngIf="globalService.getUser()"><button>logout</button></div>
Hope this helps.

Answer 2

According to Angular2 official documentation you can use ngOnInit function but I'll try to give you an example:
import { Component, OnInit } from '#angular/core';
import { Hero } from '../hero';
import { HeroService } from '../services/hero.service';
import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
#Component({
selector: 'app-dashboard-component',
templateUrl: './dashboard-component.component.html',
styleUrls: ['./dashboard-component.component.css'],
providers: [HeroDetailComponent]
})
export class DashboardComponent implements OnInit {
heroes: Hero[];
constructor(private heroService: HeroService) {}
getHeroes(): void {
this.heroService.getHeroes().then(
(heroes) => this.heroes = heroes.slice(1,5)
);
}
ngOnInit(): void {
this.getHeroes();
}
}
This is, by the way, the example developed by Google's folks, ngOnInit will be invoked when you instantiate the component. Hope this answer your question and of course helps you. Cheers, sigfried.

Answer 3

Solution 1: Refactor your service so that it returns an observable, promise or event, then on your component make use of the async-pipe like so: <div *ngIf="(loginToken | async) != null">.
Solution 2: #Input the loginToken from a higher level component and Angular will run the change detection when the value changes.
Either way I would move the logic inside the constructor to a lifecycle hook like ngOnInit or ngOnChanges.