Pada tutorial kali ini saya akan kembali memberikan materi tentang angular 4 yaitu, Menggunakan ngStyle Pada Angular 4. setelah pada pembahasan sebelumnya kita telah membahas tentang Data binding pada angular 4.

Pada angular 2 & 4 ngStyle adalah sebuah directive yang sangat berguna untuk memberikan style pada DOM dengan cara dinamis,  Salah satu cara untuk mengatur gaya adalah dengan menggunakan perintah NgStyle dan menugaskannya secara literal, seperti ini :

 

Dengan sintak di atas akan memberikan warna hijau pada element DIV.

ngStyle menjadi jauh lebih bermanfaat bila nilainya dinamis. Nilai dalam objek literal yang kita tetapkan untuk ngStyle bisa berupa ekspresi javascript yang dievaluasi dan hasil dari ungkapan tersebut digunakan sebagai nilai dari properti css, seperti ini:

 

Kode di atas menggunakan operator terner untuk mengatur warna latar belakang menjadi hijau jika negara orang tersebut adalah orang Inggris yang lain berwarna merah. Tapi ungkapannya(expression) tidak harus inline, kita bisa memanggil fungsi pada komponennya. Untuk menunjukkan ini memungkinkan menyempurnakan contoh lengkap. Mirip dengan yang telah kami buat sebelumnya, mari kita lalui melalui serangkaian orang dan cetaklah dengan nama dalam berbagai warna tergantung dari negara asal mereka

 

Akan menghasilkan seperti ini :

Oke seperti itulah Menggunakan ngStyle Pada Angular 4, sampai bertemu pada artikel selanjutnya.