Why is the template not updated in Angular?

Question

Angular

Good afternoon.
There is a React app that connects to the Angular app as an npm package.
Task: show the loader until the React application is loaded.
From Angular, I'm passing a callback that should be called when the state isLoading === false
Here's what it looks like in React

if (!isLoading) {
 hideLoading()
}

This is where the problem arises.
If the code above is executed without if , then everything works correctly

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

But as soon as I wrap it in an if, that is, the operation is not performed immediately , but as soon as the code execution gets into the if itself , then the template in Angular is not updated anymore.
That's what happens in Angular itself

// код выполенния коллбэк функции
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();
    }
  }
}

BUT
if I call hideLoading() callback in if

if (!isLoading) {
 hideLoading()
}

then the loader is not hidden, despite the fact that all methods work, and if you call hideLoading() not in if , then everything works fine

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