Combine multiple *ngIf with an async pipe into one

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;
  }
}