Pada artikel series Angular Bahasa Indonesia series ini Konsep Koding akan berbabagi tutorial mengenai bagaimana caranya melooping data secara directive pada Angular. Angular yang merupakan framework frontend dari Google memiliki cara sendiri untuk melooping data yang berupa data array maupun array object. Nah pada artikel ini kita akan melooping array dari sebuah menu makanan restaurant menggunakan Angular. 



Apa yang akan kita pelajari?

1. Membuat Project Baru Angular

2. Looping data NgFor Angular

3. Kesimpulan


 Membuat Project Baru Angular

Jika kamu belum memiliki project baru silahkan buat project baru terlebih dahulu dengan perintah di bawah ini, untuk membuat project Angular baru:

ng new konsep-koding

Untuk konsep-koding bisa kamu sesuaikan dengan nama projectmu.


Looping data NgFor Angular

Setelah kamu berhasil membuat project baru maka disini  ubah file app-component.ts menjadi seperti kode di bawah ini disini kita menambahkan data untuk kita looping nantinya:



Setelah itu ubah file app.component.html menjadi seperti kode di bawah ini:


Kemudian akan otomatis mereload dan hasilnya akan seperti gambar di bawah ini:



Kesimpulan

Untuk melooping sebuah data yang berupa Array maupun Array Object Angular menggunakan directive di file HTML nya dengan keywoard NgFor.