reload angular component

Salut salut, petite question a propos d'angular (5), j'ai capter pas mal de chose du framework sauf une, l'utilisation de ngZone pour reload des partie de component.

En faite mon problème est le suivant, j'ai une navigation qui doit se recharger et changer de contenu quand on c'est logé a l'app, mais les élément sont changé uniquement si je rafraichi ma page, hors j'aimerais pouvoir comprend comment je peut rafrachir le dom de ma navigation sans rafrachir la page.

navigation

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">

  <a class="navbar-brand" routerLink="/">Time N'joy</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" routerLink="/home">Accueil</a>
      </li>

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" routerLink="/evenements">Events</a>
      </li>

      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" routerLink="/tickets">Billetterie</a>
      </li>

    </ul>

    <ul *ngIf="displayNav == true" class="navbar-nav">
      <li class="nav-item dropdown dropleft">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="far fa-user-circle fa-2x"></i>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>

    <form *ngIf="displayNav == false" class="form-inline">
      <button (click)="login()" class="btn btn-outline-success my-2 my-sm-0" type="submit">Se connecter</button>
      &nbsp;&nbsp;&nbsp;
      <button class="btn btn-outline-warning my-2 my-sm-0" type="submit">S'inscrire</button>
    </form>

  </div>
</nav>

controlleur

import { Component, OnInit, } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UsersService } from '../../services/users/users.service';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {

  public displayNav: boolean = false;

  constructor(private router: Router,
    private auth: UsersService) { }

  ngOnInit() {
      if (this.auth.isAuthenticated() === 'undefined' || this.auth.isAuthenticated() === null) {
        this.displayNav = false;
      } else {
        this.displayNav = true;
      }
  }

  login() {
    this.router.navigate(['/login']);
  }

}