NgIf and zero: Why is the template not being rendered?

Question

I have the following observable on and Angular component:

count$: Observable<number>;

this.count$ = this.getCount();

By using the following I get the value 0 (Zero);

this.count$.subscribe(x => console.log(x));

On the template I have:

<a routerLink="/dash" *ngIf="(count$ | async)">
  <ng-container *ngIf="count$ | async as count">
    Count: {{count}}
  </ng-container>
</a> 

If count$ is 1 I get Count: 1 but if count$ is 0 the content Count: 0 is not even rendered.

Any idea why?

Answer 1

In case anyone is looking for a workaround, this so stupid but it works:

   <ng-container *ngIf="{ len: count$ | async } as ctx">
      <ng-container *ngIf="ctx.len !== null"        
          {{ ctx.len }} 
       </ng-container>
   </ng-container>

Explanation:

1. Capture count as len inside of an object called ctx
2. Because *ngIf is now looking at an object, instead of the value, it will evaluate as truthy and render the ng-container
3. Now we check whether we got an actual value or not with ctx.len !== null
4. We can access the value using ctx.len