Data Binding – Property Binding

Data binding menggunakan pendekatan Property binding dapat digunakan pada HTML attribute, directive dan component yang kita develop. Untuk menggunakan property binding, attribute ditulis dalam square bracket “[ ]”. Kita gunakan component dari modul sebelumnya yaitu server.component.ts. Skenarionya adalah, akan ditampilkan button dalam keadaan disabled. Setelah 2 detik, button akan otomatis enabled. Pada file server.component.ts, tambahkan … Read more

Sharing is caring:

Data Binding – String Interpolation

Data binding adalah cara kita menggabungkan data dari typescript ke HTML template. Ada beberapa pendekatan, pada modul ini kita bahas String Interpolation. Berikut adalah format String interpolation yang valid: Jadi, string interpolation menampilkan data dari property, atau return dari method menjadi string. Melanjutkan dari project modul sebelumnya, buka file server.component.html Skenarionya adalah, kita akan menampilkan … Read more

Sharing is caring:

Menggunakan Angular Component Selector

Cara kerja dari component selector pada Angular mirip dengan css selector. Menggunakan contoh dari modul sebelumnya, buka file app.component.ts. Kita dapat menggunakan selector dengan beberapa pendakatan, Element: bekerja seperti element html lainnya, pastikan elemen yang dibuat adalah unik. Class: Angular akan mencari element html dengan class yang didefinisikan pada selector. Attribute: Angular akan mencari element … Read more

Sharing is caring:

Menggunakan Style Pada Angular Component

Style pada Angular dapat digunakan secara global, atau dapat di overide pada level component. Seperti yang sudah dibahas pada modul instalasi CSS Framework, pada project digunakan Bootstrap. Sama seperti HTML template, style pada component diatur melalui decorator @Component terdapat dua pendekatan, yaitu: Inline Styling: menggunakan property styles, digunakan jika rule css pendek. External Styling: menggunakan … Read more

Sharing is caring: