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?

https://github.com/angular/angular/issues/19364 – Jota.Toledo Jul 10 '19 at 19:25 — Jota.Toledo, Jul 10 '19 at 19:25
Didn't know that. Thank your for the tip. – Miguel Moura Jul 10 '19 at 19:34 — Miguel Moura, Jul 10 '19 at 19:34

score 13 · Answer 1 · answered Oct 07 '21 at 13:58

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:

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

score 6 · Accepted Answer · answered Jul 10 '19 at 19:59

As discussed in this issue, this is the expected behavior. NgIf coerces the given expression into a boolean value. If the expression evaluates into a falsy value (values that are translated into false) then the content wont be rendered.

The following are all the values that javascript currently translates to false:

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (``)

score 3 · Answer 3 · answered Jul 10 '19 at 19:46

3

You're using an ngIf, means you are doing a conditional display of your value. When the value is 0, your condition evaluates to false and thus won't be displayed.

answered Jul 10 '19 at 19:46

seawave_23

1,169
2
12
23

score 0 · Answer 4 · answered Nov 23 '21 at 21:15

0

In these cases:

    if (false)
    if (null)
    if (undefined)
    if (0)
    if (NaN)
    if ('')
    if ("")
    if (``)

These are all falsy as stated above, here is my suggestion: By using a pipe(map()) to convert it to string, that way '0' is not falsy and it can still be used with number pipe, etc.

Hope this helps some else.

answered Nov 23 '21 at 21:15

David Aguiñaga

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 24 '21 at 04:37

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

4 Answers4