Async pipe in combination with subject doesn't work ngIf

Question

I have a BehaviorSubject in a service which expects a LoadingParams object which has a isLoading boolean variable on it:

  showLoadingSubject = new BehaviourSubject<LoadingParams>(
                         new LoadingParams(false, 'some text')
                       );

And I am using it as follows in a component:

 showLoading: this.theService.showLoadingSubject.asObservable();

And in the template it is

<div class="loading-screen" *ngIf="showLoading.isLoading | async" #containerDivSuper> 
some content in the div 
    </div>

Then the div should be shown by

this.showloadingSubject.next(new LoadingParams(true, 'somestring'));

But the div does not show up after the next call.

Anyone see what am I doing wrong?

showLoading is an Observable. Observables don't have any `isLoading` attribute. You want `(showLoading | async)?.isLoading` — JB Nizet, Jul 19 '18 at 22:48
@JBNizet the whole thing about the showLoading value in this example is that the async pipe will ensure the showLoading value is whatever is given in the next() function and with a behaviorsubject initially this should be whatever is given as constructor params when the behaviorsubject is created. — Stevin29, Jul 20 '18 at 08:06
@Stevin29 the whole thing about this is that you don't know what you are doing and you lecture guy that told you how to do what you want to do ;) — Antoniossss, Jul 20 '18 at 08:28
@Antoniossss ha sorry didn't see the last line of his comment. — Stevin29, Jul 20 '18 at 08:48

score 0 · Answer 1 · answered Jul 20 '18 at 08:47

Alright solved it, similar to Async pipe not working with Subject, it is in the syntax of the directive.

<div class="loading-screen" 
      *ngIf="showLoading ? (showLoading | async).isLoading : false" #containerDiv>
   Some text
</div>

I also added a check to see if the observable isn't undefined because I was getting an error for undefined.

1 Answers1