Почему не выстрелил асинк?

Мой код прелоадера:

import { Injectable } from "@angular/core";
import { Subject, Observable } from 'rxjs';

@Injectable()
export class SpinnerService {
  private preloaderState$ = new Subject<boolean>();

  activate() {
    this.preloaderState$.next(true);
  }

  disactivate() {
    this.preloaderState$.next(false);
  }

  preloader(): Observable<boolean> {
    return this.preloaderState$.asObservable();
  }
}

Код шаблона:

<div *ngIf="spinnerService.preloader() | async">Loading...</div>