Usare defer in Angular 17

Angular 17 porta con se diverse novità.

Una di queste è @defer, che in pratica ci permette di caricare un componente/template in maniera con una lazy-loading.

Può essere molto comodo nel caso in cui un componente carichi parecchi dati.

In questo articolo vediamo un esempio basico.

Cominciamo creando una lista:

import {Component, OnInit} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  persone: string[];

  constructor() {
    this.persone = [];
  }

  ngOnInit(): void {
    for (let i = 0; i < 1000; i++) {
      this.persone.push(`Numero ${i}`);
      console.log(i);
    }
  }

}

Nell'HTML:

<div>
  <ul>
    @defer {
      @for (item of persone; track item) {
        <li>{{ item }}</li>
      } @empty {
        Lista vuota
      }
    } @placeholder (minimum 2000ms) {
      La tua lista
    } @loading {
      Loading...
    } @error {
      Si è verificato un errore!
    }
  </ul>
</div>

Come vedete possiamo scegliere:

• placeholder con o senza un tempo
• scritta per il loading
• eventuale error

Enjoy!