Not operation with async pipes in Angular 4

Question

I am using Angular 4 as a front-end to build an app with Node JS as the back end. The front end will fetch data from a SQL database and display a form. Since, this fetch may take some time when deployed, I wanted to put a "Please wait" message while the data is fetched. For now I used async pipes, subjects and observables and a simple timeout function to test it works. I tried this code.

In .ts file:

dataReady = new Subject<any>();
dataReadyObs = new Observable<any>();

constructor() {
  this.dataReadyObs = this.dataReady.asObservable();
}

ngOnInit() {
    someFunc() {
       setTimeout(function() {
       this.dataReady.next(true);
       }.bind(this), 2000);
    }
}

In the html file:

<form *ngIf="dataReadyObs | async">

</form>

<h3 *ngIf="!dataReadyObs | async"> Please wait ... </h3>

But the "Please wait" message never shows up, only the form after 2 seconds. Is the ! operator not applicable when using pipes? I managed to solve this with ng-template, but in case the not operator is necessary, is there a way to use it with pipes?

<div *ngIf="dataReadyObs | async; else waitmessage">
  <form>

  </form>
</div>

<ng-template #waitmessage>
  <h3>Please wait ...</h3>
</ng-template>

Answer 1

You can use with pipes.To make it work you need to write like this with (). cause pipe is 2 operation so for angular its 'false | async'

<h3 *ngIf="!(dataReadyObs | async)"> Please wait ... </h3>

another approach is to use this is more safely

<h3 *ngIf="(dataReadyObs | async) === false"> Please wait ... </h3>