Почему мой взгляд не обновляется?

Question

Я нахожусь в процессе изучения Angular 6 (и front end dev). Приведенный ниже пример иллюстрирует мою попытку изменить представление в home.component.html с navigation.component.html. Используя console.log, я вижу, что функция работает как следует, и логическое значение изменяется соответствующим образом, однако это изменение не отображается в представлении. Кажется, что компонент представления обновляется только с изменениями из его компонента контроллера партнера. Может кто-нибудь объяснить, почему и как я могу выполнить свою задачу?

app.component.html:

<app-navigation></app-navigation>
<router-outlet></router-outlet>

navigation.component.html:

<button (click)='homeComp.toggleAuth()'> Sign In </button>

home.component.ts:

viewAuthComponent: boolean;

toggleAuth() {
  this.viewAuthComponent = !(this.viewAuthComponent);
  console.log(this.viewAuthComponent);
}

home.component.html:

 {{ viewAuthComponent }}