Menampilkan Daftar Angular dengan @for, track, dan @empty

Daftar artikel dapat berubah urutan ketika item ditambahkan, dihapus, atau difilter. Angular membutuhkan identitas stabil untuk menghubungkan item dengan elemen tampilannya.

Contoh ini memakai id, bukan posisi array. Dua artikel percobaan ditampilkan saat komponen dibuka. Tombol mengosongkan daftar memperlihatkan cabang @empty, sehingga keadaan tanpa data memiliki pesan yang sengaja dirancang.

Contoh implementasi

import { Component, signal } from '@angular/core';

type Article = { id: number; title: string };

@Component({
  selector: 'app-reading-list',
  standalone: true,
  template: `
    <button (click)="clear()">Clear list</button>
    <ul>
      @for (article of articles(); track article.id; let index = $index) {
        <li>{{ index + 1 }}. {{ article.title }}</li>
      } @empty {
        <li>No articles in this reading list.</li>
      }
    </ul>
  `,
})
export class ReadingList {
  articles = signal<Article[]>([
    { id: 11, title: 'Learning components' },
    { id: 24, title: 'Working with signals' },
  ]);

  clear(): void {
    this.articles.set([]);
  }
}

Cara memeriksa

Pastikan dua judul tampil dengan nomor 1 dan 2. Tekan tombol Clear list dan periksa pesan kosong. Sebagai latihan, tambahkan tombol pembalik urutan menggunakan update(items => [...items].reverse()) pada metode TypeScript.

Nomor urut boleh berasal dari $index, tetapi identitas tetap memakai id. Hindari ID duplikat atau ID baru yang dibuat ulang setiap render. Jika item berasal dari database, gunakan primary key yang sudah tersedia. Cabang kosong ini belum mewakili loading atau error; kedua keadaan itu perlu ditangani terpisah saat data berasal dari API.

Referensi

Dokumentasi resmi