Невозможно обновить компонент Navbar без обновления всей страницы в angular

Question

У меня есть Navbar, который имеет следующие элементы:

Добро пожаловать

Администратор

О

Источник

Логин

В первый раз, когда пользователь собирается войти в систему, значение для входа «Login» и когда пользователь переходит к компоненту приветствия (или любому другому компоненту) ) значение для входа в систему должно измениться на переданное имя пользователя. Но при переходе к компоненту приветствия значение для входа в систему на панели навигации не изменяется и по-прежнему отображается «Логин». Только когда я обновляю sh страницу, отображается имя пользователя. Не могу понять, что не так

Ниже я сделал следующее:

navbar.component. html

    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria- 
         expanded="false">{{username}}<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li class="active"><a (click)="logout()">Logout</a></li>
        </ul>
      </li>
    </ul>

navbar.component.ts

     constructor(http: Http, public router: Router, private authService: AuthService) {
    this.username = localStorage.getItem('username');

    this.authService.UserName.subscribe(value =>{this.username = value;});
    console.log(this.username)

Login.component.ts

      return this.authService.login(this.model.username, encrypted.toString())
        .subscribe(res => {
          this.authService.UserName.next("xyz");
            this.cdr.detectChanges();
            console.log(this.authService.UserName)

}

authentication.service

   public login(username: string, password: string) {
    let authHeader = new Headers({ 'Content-Type': 'application/json' });
    let body = JSON.stringify({ username: username, password: password });
    return this.http.post(this.endPoint.AuthenticationUrl, body, { headers: authHeader })
        .pipe(map((response: Response) => {

            this.username = response.json().username;
            localStorage.setItem('username', this.username);
        },
        (err) => {this.handleError; }));
}

Я пробовал взаимодействие компонентов и обнаружение изменений. Я уверен, что что-то упустил, но не уверен, что это такое. Любая помощь будет оценена.