Simplifying Nested Async Subscriptions in Angular: A Practical Example

// ⚠️ ANTI-PATTERN: Nested subscriptions in TypeScript
export class UserDashboardComponent implements OnInit {
  user: User | null = null;
  permissions: Permission[] = [];
  subscription: SubscriptionPlan | null = null;
 
  constructor(
    private authService: AuthService,
    private permissionService: PermissionService,
    private billingService: BillingService
  ) {}
 
  ngOnInit(): void {
    // 😫 Callback Hell: hard to unsubscribe, impossible to cancel, fragile error handling!
    this.authService.getCurrentUser().subscribe((user) => {
      this.user = user;
      
      this.permissionService.getPermissions(user.id).subscribe((perms) => {
        this.permissions = perms;
 
        this.billingService.getPlan(user.tenantId).subscribe((plan) => {
          this.subscription = plan;
        });
      });
    });
  }
}

// user-dashboard.component.ts (RxJS Composition)
import { Component, inject } from '@angular/core';
import { Observable, switchMap, forkJoin } from 'rxjs';
import { AuthService, PermissionService, BillingService, User, Permission, SubscriptionPlan } from '../services';
 
interface DashboardState {
  user: User;
  permissions: Permission[];
  plan: SubscriptionPlan;
}
 
@Component({
  selector: 'app-user-dashboard',
  templateUrl: './user-dashboard.component.html',
})
export class UserDashboardComponent {
  private authService = inject(AuthService);
  private permissionService = inject(PermissionService);
  private billingService = inject(BillingService);
 
  // Single consolidated stream for the view
  readonly state$: Observable<DashboardState> = this.authService.getCurrentUser().pipe(
    switchMap((user) =>
      // Run parallel calls once user is resolved
      forkJoin({
        user: of(user),
        permissions: this.permissionService.getPermissions(user.id),
        plan: this.billingService.getPlan(user.tenantId),
      })
    )
  );
}

<!-- Legacy ViewModel Object Unwrapping -->
<ng-container *ngIf="state$ | async as state">
  <div class="user-card">
    <h2>Welcome, {{ state.user.name }}</h2>
    <p>Plan: {{ state.plan.name }}</p>
 
    <ul>
      <li *ngFor="let perm of state.permissions">{{ perm.name }}</li>
    </ul>
  </div>
</ng-container>

// user-dashboard.component.ts (Modern Standalone & Signals)
import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { switchMap, forkJoin, of } from 'rxjs';
import { AuthService, PermissionService, BillingService } from '../services';
 
@Component({
  selector: 'app-user-dashboard',
  standalone: true,
  templateUrl: './user-dashboard.component.html',
})
export class UserDashboardComponent {
  private authService = inject(AuthService);
  private permissionService = inject(PermissionService);
  private billingService = inject(BillingService);
 
  private state$ = this.authService.getCurrentUser().pipe(
    switchMap((user) =>
      forkJoin({
        user: of(user),
        permissions: this.permissionService.getPermissions(user.id),
        plan: this.billingService.getPlan(user.tenantId),
      })
    )
  );
 
  // Expose as a synchronous, auto-managed Signal
  state = toSignal(this.state$);
}

<!-- user-dashboard.component.html (Modern Control Flow & @let) -->
@if (state(); as data) {
  <div class="user-card">
    <h2>Welcome, {{ data.user.name }}</h2>
    <span class="badge">{{ data.plan.name }}</span>
 
    <ul class="permissions-list">
      @for (perm of data.permissions; track perm.id) {
        <li>{{ perm.name }}</li>
      } @empty {
        <li>No special permissions assigned.</li>
      }
    </ul>
  </div>
} @else {
  <div class="skeleton-loader">Loading user details...</div>
}