Почему не обновляется темплейт в Ангуляр?

Question

HellishCode @HellishCode

Почему не обновляется темплейт в Ангуляр?

Добрый день.
Есть Реакт приложение, которое подключается к Ангуляр приложение в качестве пакета npm.
Задача: показывать лоадер до тех пор, пока Реакт приложение не загрузится.
Из Ангуляра, я прокидываю коллбек, который должен вызваться, когда состояние isLoading === false
Вот как это выглядит в Реакт

if (!isLoading) {
 hideLoading()
}

В этом и возникает проблема
Если код выше выполнить без if, то все работает корректно

hideLoading() // работает
setTimeout(() => hideLoading(), 3000)  // работает

Но как только я оборачиваю в if, то есть, операция выполняется не сразу, а как только выполнение кода попадет в сам if, то темплейт в Ангуляр не обновляется больше
Вот что происходит в самом Ангуляр

// код выполенния коллбэк функции
public hideLoading() {
  this.spinnerService.hide(); // поток в котором вызываем метод
}

// сам сервис

@Injectable({
  providedIn: 'root',
})
export class LoadingSpinnerService {
  loaderSubject = new Subject<LoaderState>();
  loaderState = this.loaderSubject.asObservable();
  constructor() {}
  hide() {
    this.loaderSubject.next(<LoaderState>{ show: false });
    console.log('method hide') // консоль отрабатывает, то есть, сюда мы попадаем в любом случае, неважно, коллбэк в if или нет и меняем true(когда лоадер виден) на false, чтобы его спрятать
  }
}

// сам компонет
export class SpinnerComponent implements OnInit, OnDestroy {
  log = console.log;
  show = false;
  private subscription: Subscription;
  constructor(
   public loaderService: LoadingSpinnerService
  ) {}
  ngOnInit() {
    this.subscription = this.loaderService.loaderState.subscribe((state: LoaderState) => {
      this.show = state.show;
      console.log('subscription state.show = ', state.show);
      console.log('subscription this.show = ', this.show);
    });
  }
  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

НО
если я вызываю коллбек hideLoading() в if

if (!isLoading) {
 hideLoading()
}

то лоадер не прячется, не смотря на то что все методы отрабатывают, а если вызвать hideLoading() не в if , то все работает хорошо

// это сам темплейт 
<div data-automation="loadingSpinner" [class.hidden]="!show"> // здесь переменная show не меняется в том случае, когда я вызываю коллбэк в if.<b> В этом и заключается проблема, почему она не меняется, я не могу понять, так как все консоль логи вызываются с новыми данными</b>