NgIf async pipe, bound as, with condition on emitted value

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Conditions on a value bound with *ngIf as would be nice. For this example:

• You have an Observable<any[]> that emits a list, which can be empty.
• You want to conditionally show content when the list is not empty.

Current behavior

Currently, in Angular 4.0.2, you need to do something like this.

        <ng-container *ngIf="myList$ | async as myList">
          <ng-container *ngIf="myList.length">
             <!-- content to show -->
          </ng-container>
        </ng-container>

Filtering empty list values from the Observable won’t work because you want an emitted empty list value to remove the content.

Desired behavior

It would be nice to avoid the double *ngIf and have a single expression that does this.

Maybe something like this?

        <ng-container *ngIf="myList$ | async as myList && myList.length">
           <!-- content to show -->
        </ng-container>

EDIT: Although that syntax implies a boolean value gets assigned. So maybe some other syntax…

• as myList ??? myList.length
• as myList; ?myList.length
• as myList if (myList.length) where myList.length could be any boolean expression

What is the motivation / use case for changing the behavior?

Simpler templates.

• Angular version: 4.0.2

• Language: TypeScript 2.2.2

[arlowhite]

They’re related as far as my example. Should the empty list [] be considered truthy within *ngIf?

But aside from lists, there could be situations where people want to do quick conditional. Especially if it’s an object. This is contrived, but I think this would be useful in actual projects.

<div *ngIf="myObject$ | async as myObject; if myObject.a && myObject.x > 10">
  <span>{{myObject.a}}</span>
</div>

[Airblader]

Should the empty list [] be considered truthy within *ngIf?

It’s truthy in JavaScript, so yes, it should. Having Angular behave differently here would be a great source of confusion and pain.