Почему Angular обновляет переменную в DOM только один раз?

Question

[sequelsur]

Почему Angular обновляет переменную в DOM только один раз?
будь-то сервис или компонент, пытаюсь скрывать элемент через *ngIf boolean переменную, но angular видит только когда переменная изменяется в первый раз, второй раз не видит. НО если сделать console.log то переменная все таки меняется.
я бы сделал ChangeDetectorRef, но как бы в том случае если переменная хранится в сервисе, и мне надо чтоб она менялась во всех компонентах DOM где используется.
Извините если неправильно выразился

Answer 1

[Денис Щербина]

Вот здесь пример, как подписаться на переменную в сервисе.
https://stackoverflow.com/a/43161506
Без такой подписки на событие в сервисе, данные подгружаются единожды в момент времени.

Answer 2

[Антон Швец]

1. Все меняющиеся во времени сущности храни в Observable
2. Observable, который надо изменить снаружи называется Subject. Его разновидности, которые умеют помнить значения называются ReplaySubject (изначально пустой) и BehaviorSubject (изначально должен быть инициализирован).
3. Забирай ссылки на данные из сервиса в компонент.
4. Не подписывавайся на них, сразу вставляй в шаблон через asyncPipe

Пример.
В сервисе

private flagSource = new BehaviorSubject(false);
public flag: Observable<boolean> = this.flagSource;

setFlag(value: boolean) {
   this.flagSource .next(value);
}

в компоненте
flag = this.myService.flag;

в шаблоне
<div *ngIf="flag | async">

asyncPipe следит за обсерваблом и заставляет компонент поучаствовать в детекции изменений