Angular

Directive ngIf berfungsi seperti if block. Memerlukan nilai true agar directive dijalankan. Sebagai contoh, buka file server.component.html, lalu tambahkan code dibawah. Perhatikan penulisan adalah *ngIf, tanda astersk (*) menunjukan structural directive, dimana akan mengubah struktur DOM. Kemudian pada server.component.ts, tambahkan deklarasi property serveCreated. Kemudian tambahkan perintah merubah value menjadi true pada method onServerCreate(). (Lihat baris … Read more

Directive adalah class yang berfungsi menambahkan behavior pada element. Terdapat 2 tipe direktif, yaitu attribute dan structural directive. Attribute Directive Structural Directive Mirip dengan normal HTML Attribute Diawali dengan tanda asterisk (*) Perubahan hanya terhadap element, misalnya: mengubah warna background. Mempengaruhi struktur DOM(element bisa ditambahkan atau dikeluarkan dari DOM) Angular memiliki directive built-in untuk mengatur … Read more

Two-way binding adalah cara data binding dimana event dan property binding dilakukan bersamaan. Two-way binding menggunakan special directive ngModel. Untuk lebih jelasnya, kita ubah file server.component.html menjadi seperti berikut. Pada contoh diatas, dengan menggunakan Two-way binding, perubahan pada HTLM input akan langsung mengubah nilai variable serverName pada server.component.ts. Demikian juga sebaliknya value pada input type … Read more

Setelah mempelajar data binding, berikutnya kita akan membahas event binding. Event binding menggunakan format seperti berikut. Melanjutkan dari contoh sebelumnya, kita akan tambahkan event pada button. Skenarionya adalah ketika button di click, isi text “No server created…” akan diubah menjadi “Server created…”. Buka file server.component.ts, lalu tambahkan code berikut (lihat bagian commentar event binding). Tips: … Read more