I find myself in this situation quite often when I'd like to do the following:
<component-name
*ngIf="(referralsService.referrals$ | async; let referrals).length > 0
></component-name>
But this is not allowed. Is there a better way to accomplish allowing me to name my variable so I can use it later while also calling length or something else on it?
There is no way to do this in one *ngIf statement, but you can use the <ng-container> wrapper:
<ng-container *ngIf="referralsService.referrals$ | async as referrals">
<component-name *ngIf="referrals.length > 0"></component-name>
</ng-container>
The Angular
<ng-container>tag is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.
For two observables you can use:
<ng-container *ngIf="{
unused: (referralsService.unusedReferrals$ | async),
used: ( referralsService.referrals$ | async)
} as referrals">
<component-name-1 *ngIf="referrals.used?.length > 0"></component-name-1>
<component-name-2 *ngIf="referrals.unused?.length > 0"></component-name-2>
</ng-container>
<ng-container *ngIf="referralsService.referrals$ | async as referrals && referralsService.unusedReferrals$ | async as unusedReferrals"> doesn't seem to work
<ng-container> or use the object approach, but you'll lose some template code hinting