Combine Async Pipes in Angular: From combineLatest to Signals and @let

⚡ Using Modern Angular (v17+)? Jump directly to 2. The Modern Approach: Converting Streams with toSignal() to eliminate the async pipe completely.

If you are building an Angular application that fetches data from multiple APIs, you've probably written a template that looks like this:

<!-- ⚠️ The Problem: Multiple async pipes causing duplicate requests -->
<div *ngIf="user$ | async as user">
  <h2>{{ (user$ | async)?.name }}</h2>
  
  <div *ngIf="stats$ | async as stats">
    <p>Points: {{ (stats$ | async)?.points }}</p>
  </div>
</div>

This is a common and expensive mistake. If user$ is an HTTP request, using | async multiple times triggers multiple identical network requests. Even worse, nesting *ngIf structural directives creates deep, unreadable HTML.

Here is a quick overview of how we will solve this using modern Angular patterns:

Let's examine the three cleanest ways to combine streams and eliminate duplicate subscriptions.

1. The Classic RxJS Pattern: combineLatest ViewModel 🔄

If your project is built heavily around RxJS streams, the most robust pattern is to combine all independent observables into a single vm$ (ViewModel) stream in your component class:

import { Component, inject } from '@angular/core';
import { combineLatest, Observable } from 'rxjs';
import { PlayerService, Player, PlayerStats } from './player.service';
 
interface PlayerViewModel {
  player: Player;
  stats: PlayerStats;
}
 
@Component({
  selector: 'app-player-profile',
  templateUrl: './player-profile.component.html'
})
export class PlayerProfileComponent {
  private playerService = inject(PlayerService);
  private playerId = 23;
 
  player$: Observable<Player> = this.playerService.getPlayer(this.playerId);
  stats$: Observable<PlayerStats> = this.playerService.getStats(this.playerId);
 
  // Combine multiple streams into a single ViewModel observable
  vm$: Observable<PlayerViewModel> = combineLatest({
    player: this.player$,
    stats: this.stats$
  });
}

In the Template (Modern Control Flow)

With modern Angular @if, you only need a single async pipe at the root of the view. Once unwrapped, you access all properties synchronously:

@if (vm$ | async; as vm) {
  <div class="player-card">
    <h2>{{ vm.player.name }}</h2>
    <p>Position: {{ vm.player.position }}</p>
 
    <ul>
      <li>Points: {{ vm.stats.points }}</li>
      <li>Rebounds: {{ vm.stats.rebounds }}</li>
    </ul>
  </div>
} @else {
  <div class="skeleton-loader">Loading player profile...</div>
}

Now there is exactly one subscription and zero duplicate network requests.

Next, let's look at how modern Angular Signals make this even simpler.

2. The Modern Approach: Converting Streams with toSignal() ⚡

With Angular Signals, you can eliminate the async pipe entirely. The @angular/core/rxjs-interop package provides toSignal(), which subscribes to an Observable under the hood and exposes it as a synchronous, reactive Signal:

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { PlayerService } from './player.service';
 
@Component({
  selector: 'app-player-signals',
  standalone: true,
  template: `
    @if (player(); as p) {
      <div class="player-card">
        <h2>{{ p.name }}</h2>
        
        @if (stats(); as s) {
          <p>Points: {{ s.points }} | Rebounds: {{ s.rebounds }}</p>
        }
      </div>
    } @else {
      <p>Loading player...</p>
    }
  `
})
export class PlayerSignalsComponent {
  private playerService = inject(PlayerService);
  private playerId = 23;
 
  // Automatically manages subscription & unsubscription lifecycle
  player = toSignal(this.playerService.getPlayer(this.playerId));
  stats = toSignal(this.playerService.getStats(this.playerId));
}

Why toSignal() is the recommended standard:

• No manual unsubscription: Subscriptions are tied directly to the component lifecycle and cleaned up automatically.
• Synchronous template reads: Read values with standard function calls (player()). No async pipe needed.
• Fine-grained reactivity: Updates trigger only the necessary DOM bindings, setting up your app for Zoneless change detection.

Now let's examine the newest addition in Angular 18.1: the @let declaration.

3. The Angular 18.1+ Solution: @let Template Variables 🎯

Starting in Angular 18.1, you can declare local template variables directly within the template using @let. This eliminates the need for dummy structural wrapper elements just to alias an async pipe:

@let player = player$ | async;
@let stats = stats$ | async;
 
@if (player && stats) {
  <div class="player-container">
    <h2>{{ player.name }}</h2>
    <p>Points: {{ stats.points }}</p>
    <p>Assists: {{ stats.assists }}</p>
  </div>
}

Key benefits of @let:

• Works anywhere in the template scope.
• Provides strict type inference for downstream expressions.
• Avoids creating extra ng-container wrappers in the DOM just to unwrap an observable.

Summary

To keep your Angular applications fast and clean:

1. Never repeat async pipes on the same observable across template elements. It causes duplicate network requests.
2. Use combineLatest to assemble a unified vm$ ViewModel for complex RxJS streams.
3. Embrace toSignal() in modern components to benefit from synchronous template reads and signal reactivity.
4. Use @let in Angular 18+ to simplify template variable scoping without nesting ng-container.

For more modern Angular architecture techniques, check out my guides on Essential Angular Interview Questions and Sharing Data Between Components!