How can I use async pipe with @defer to load and declare variable in template in Angular 17

Question

For Example using @if, I am able to do this: @if(items$ | async; as items). I am able to declare 'items' as a variable holding the array of items using the 'as' keyword in the template.

How can I achieve the same thing using @defer? Something like: @defer(when items$ | async; as items)

I tried @defer(when items$ | async; as items) but angular template does not like it.

Answer 1

Deferred view work perfectly well with observables or promises, but your as items is not a valid option for the @defer control flow. You'll have to move that to a @for block instead.

Answer 2

@defer blocks don't allow the creation of aliases, only @if blocks allow that.

You should simply wrap your @defer with an @if block.

@if(items$ | async; as items) {
   @defer() {
      ...
   }
} else {
  ...
}

Answer 3

To get placeholder behaviour,

Stackblitz

import 'zone.js';
import { Component, computed } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AsyncPipe } from '@angular/common';
import { of, delay } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe],
  template: `

    @defer (when loaded()) {
      <h1>DEFERRED</h1>
      @for(item of items(); track item) {
        <div>{{item}}</div>
      }
    } @placeholder {
      <p>PLACEHOLDER</p>
    }
  `,
})
export class App {
  name = 'Angular';
  items$ = of([1, 2, 3, 4]).pipe(delay(3000));
  items = toSignal(this.items$);

  loaded = computed(() => {
    return !!this.items()?.length;
  });
}

bootstrapApplication(App);