Navmenu items doesn't change unless it's refreshed it.

I have an angular app that has authentication system. Inside the navmenu, I have login, logout and a text that displays username. It works just fine, however, when the user logged in, I still see the same navbar. login should be gone and logout along with username text should be there. But it's not. They are there only when user refreshes the page. I don't know what I'm missing.

Here is my navmenu.component.html

<li *ngIf="!currentUser"><a [routerLink]="['/login']"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li *ngIf="currentUser"><a (click)="logout()"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
<li *ngIf="currentUser"><a><span class="glyphicon glyphicon-user"></span>  </a></li>

And here is my navmenu.component.ts code:

import { Observable } from 'rxjs';
import { User } from './../../models/user';
import { Router } from '@angular/router';
import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent implements OnInit {
    currentUser: User;

ngOnInit() {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser') || '');
}


constructor(private authService: AuthService, private router: Router) {  }


   logout() {
      this.authService.logout();
      this.router.navigate(['/home']);
   }
}

Lastly, here is my app.component.html file looks like:

<nav-menu></nav-menu>
<router-outlet></router-outlet>