Angular *ngIf; else on async when undefined is a valid value from Observable

Issue

I am trying to use *ngIf; else on an observable which can emit undefined. Here is what I have

<span *ngIf="(content$ | async) as content; else loading">
  <span *ngIf="content != undefined; else notFound">
    // show content
  </span>
</span>

The problem is that if the value of observable is undefined, the page keeps showing #loading and doesnt switch to #notFound

Is there a way to accept undefined (can be changed to null) as a valid output value and get the UI to display the appropriate section at different stages?

Solution

Because Boolean(undefined) evaluates to false, the inner condition content !== undefined is always true and notFound will never load.

You will need to change your application logic.

Answered By - John