Free Indonesian Tutorial
Membuat Web App Menggunakan Angular
Directive ngSwitch mirip dengan switch block pada bahasa programming. Untuk jelasnya, mari buka app.component.ts, tambahkan property value = 5. Buka file app.component.html, tambahkan code berikut. Jika Anda jalankan, sesuai ekspektasi, pada browser akan ditampilkan teks “Value adalah 5”.
NgFor berguna untuk melakukan iterasi dari sebuah array atau object. Contoh skenario, akan ditampilkan list user. Buka file server.component.html, lalu tambahkan code berikut Perhatikan, ngFor menggunakan tanda asterisk (*). Code diatas menunjukan looping array users (property yang kita definisikan pada file server.component.ts), taruh nilainya dalam temporary variable user. Kemudian value dari variable user akan ditampilkan … Read more
Directive ngClass berfungsi untuk menambah CSS class pada element HTML jika kondisi tertentu dipenuhi. Contoh skenario, jika status server online, tulisan akan ditampilkan bold. Buka file server.component.html, tambahkan code ngClass seperti berikut. Tujuan dari code adalah, jika nilai variable serverStat adalah online, maka tambahkan class css .online pada element. Kemudian buka server.component.ts, ubah pada property … Read more
ngStyle adalah directive yang digunakan untuk mengubah style pada element HTML. Berikut contoh dengan skenario, kita akan mengubah warna background paragraph status server berdasarkan status online atau offline. Buka file server.component.html, ubah element paragraph yang menampilkan text status server dengan menambahkan ngStyle. Perhatian directivenya adalah ngStyle, untuk mengatur nilainya, digunakan property binding, oleh karena itu … Read more