Concat many observables object into one variable
Using many async
pipes in single *ngIf
means less readable code and it reduces performance because async
is a pure pipe.
import { Component } from "@angular/core";
import { of } from "rxjs";
@Component({
template: ` <ng-container *ngIf="(pet$ | async) && !(cat$ | async)"> ... </ng-container> `,
})
export class ExampleComponent {
pet$ = of(true);
cat$ = of(false);
}
A better idea is to use RxJs operators to combine multiple conditions into a single observable object. For example, you can use combineLatest
operator.
import { Component } from "@angular/core";
import { of, combineLatest, map } from "rxjs";
@Component({
template: ` <ng-container *ngIf="show$ | async"> ... </ng-container> `,
})
export class ExampleComponent {
private pet$ = of(true);
private cat$ = of(false);
show$ = combineLatest([this.pet$, this.cat$]).pipe(map(([pet, cat]) => pet && !cat));
}
Return null to hide section if conditions are not fulfilled
Using many *ngIf
unnecessary increases a template’s size and complexity.
import { Component } from "@angular/core";
import { of } from "rxjs";
@Component({
template: `
<ng-container *ngIf="users$ | async as users">
<ng-container *ngIf="users.length > 1 && users.length < 5"> ... </ng-container>
</ng-container>
`,
})
export class ExampleComponent {
users$ = of(["Alice", "Bob", "Charlie", "Dave"]);
}
You can check conditions inside component logic, create an observable object and return null if conditions are not fulfilled.
import { Component } from "@angular/core";
import { map, of } from "rxjs";
@Component({
template: ` <ng-container *ngIf="show$ | async as users"> </ng-container> `,
})
export class ExampleComponent {
users$ = of(["Alice", "Bob", "Charlie", "Dave"]);
show$ = this.users$.pipe(map((users) => (this.showSection(users) ? users : null)));
private showSection(users: string[]): boolean {
return users.length > 1 && users.length < 5;
}
}
Section won’t be shown because *ngIf
only render template when value is truthy. Than means when we return null
section will be hidden.