Konstruksi for di Angular

Loop melalui elemen array juga dapat dijalankan menggunakan konstruksi @for.

Mari kita coba dalam praktik. Misalkan lagi di komponen kita ada array:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Mari kita perhatikan sintaksis konstruksinya:

@for () {
	tag
}

Tentukan array yang akan diulang dan variabel, yang akan menampung elemen-elemennya:

@for (elem of arr) {
	tag
}

Namun, ini belum semuanya. Untuk kerja yang benar dari Angular, kita harus menentukan perintah khusus track. Setelahnya kita harus menentukan suatu nilai unik untuk setiap elemen array. Ini diperlukan agar Angular dapat bekerja dengan DOM lebih optimal. Mari kita gunakan nomor elemen array sebagai nilai unik tersebut. Untuk ini kita harus menentukan variabel $index. Jadi, inilah kode akhir kita:

@for (elem of arr; track $index) {
	<div>
		{{ elem }}
	</div>
}

Diberikan array:

export class AppComponent {
	public arr: numbers[] = [1, 2, 3, 4, 5];
}

Tampilkan setiap elemen dari array ini dalam paragraf terpisah.