Combine multiple *ngIf with an async pipe into one

Try to avoid using many async pipes in a single *ngIf directive. Move logic to use RxJs operators instead. See examples of how to do it correctly.

July 17, 2022 angular angular-15 rxjs

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.

Do you like the content?

Your support helps me continue my work. Please consider making a donation.

Buy Me A Coffee

Donations are accepted through PayPal or Stripe. You do not need a account to donate. All major credit cards are accepted.

Portrait of the author

About me

On a daily basis, I work as a Front-End Developer with a primary focus on JavaScript. I feel most comfortable with Angular and NestJS, but I’m always eager to venture beyond a single tech stack. I effectively leverage AI tools in my workflow, which allows me to quickly onboard into new technologies and write code in other languages or frameworks whenever needed.

After hours, I bring my passion for tech into the physical world. I run my own homelab, where I experiment with server management and build home automation and monitoring powered by Home Assistant.

Leave a comment