Angular

List Rendering: @for

Penjelasan

@for (item of daftar; track item.id) { ... } menggantikan directive *ngFor lama untuk menampilkan array sebagai daftar elemen. Beda dengan React/Vue yang key-nya opsional-tapi-direkomendasikan, klausa track di Angular BERSIFAT WAJIB — kalau tidak ada nilai unik yang cocok, boleh pakai track $index sebagai fallback.

Contoh Konsep

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

@Component({
    selector: 'app-daftar-bahasa',
    standalone: true,
    template: `
        <ul>
            @for (item of bahasa; track item) {
                <li>{{ item }}</li>
            }
        </ul>
    `,
})
export class DaftarBahasaComponent {
    bahasa = ['TypeScript', 'JavaScript', 'Dart'];
}

Praktikum

Buat component dengan properti produk berisi array 3 objek {id, nama}. Tampilkan sebagai daftar <li> lewat @for, memakai track item.id (bukan $index).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

@for TIDAK BISA dikompilasi tanpa klausa track — beda dengan React/Vue yang "key" cuma warning kalau dilupakan, Angular akan ERROR SAAT BUILD kalau kamu lupa menulis track sama sekali, jadi ini dipaksa dari awal, bukan sekadar disarankan.

← Kembali Conditional Rendering: @if Lanjutkan → Component Communication: @Input & @Output