Angular2 Subscribe to a global variable - html

Question

I'm fairly new to Angular 2 and I have a little problem.
I have a header component, in the header I want to use an ngIf, cause in the login-screen I will hide the header(navbar).
Furthermore, I want to hide some more things from the header, depending on the users-profile.
To store, if a user is logged in, I have a global service named variables.ts, which looks like this:
import { Injectable } from '#angular/core';
#Injectable()
export class Variables {
private url = "...";
private username;
private password;
private isLoggedIn = false;
constructor() {}
setUrl(val) {
this.url = val;
}
getUrl() {
return this.url;
}
setUsername(val) {
this.username = val;
}
getUsername() {
return this.username;
}
setPassword(val) {
this.password = val;
}
getPassword() {
return this.password;
}
setIsLoggedIn(val) {
this.isLoggedIn = val;
}
getIsLoggedIn() {
return this.isLoggedIn;
}
}
My header-component looks like this:
import { Component } from '#angular/core';
import { Router } from '#angular/router';
import { Variables } from '../../services/variables';
#Component({
selector: 'app-header',
moduleId: module.id,
templateUrl: 'header.component.html'
})
export class HeaderComponent {
constructor(private variables: Variables) {}
isLoggedIn() {
return this.variables.getIsLoggedIn();
}
console.log(loggedIn);
}
And last but not least, in the header.component.html I did this:
<nav class="navbar navbar-default navbar-static-top" *ngIf="isLoggedIn()">
My problem now is, that the header-component do not automatically update the var loggedIn, so the header is hidden if I'm logged in.
How can i make it functional?

Answer 1

I updated my original post, so that it is functional now ;)
Thanks for your help!
Solution: Don´t bind it directly to a variable, but to a function and in the "ngIf" just ask the function ;)