Mengenal Directive: ngClass

Apa dan bagaimana ngClass itu?

R. Kukuh
R. Kukuh
Sep 4, 2018 · 2 min read

Tutorial kali ini adalah tentang directive: ngClass. Fungsi directive ini adalah mengubah class-nya HTML elements.

Sama seperti ngClass, ngStyle juga termasuk dalam attribute directive dimana ia tidak membuat atau menghapus element namun hanya mengubah element tempat ia berada.


Persiapan

Pembuatan project baru

Adapun project yang digunakan dalam tutorial kali ini mengambil dari tutorial sebelumnya tentang ngClass.

Pembuatan CSS Class

Buka file server.component.ts, edit seperti ini:

Fokus pada line 6–9 dimana kita membuat 2 CSS class yang nanti akan digunakan saat pendeklarasian ngClass. Dari tutorial sebelumnya kita sudah mengenal cara pembuatan style component seperti ini disebut inline styling.

Isi template component

Buka file server.component.html, lalu jadikan seperti ini:

Fokus pada line 3, disanalah kita mengatur CSS class apa yang harus diterapkan saat suatu kondisi terpenuhi.


Hasil Akhir

Jalankan “ng serve”, buka browser, lalu lakukan refresh berulang-ulang. Anda akan dapati tampilan yang berubah-ubah seperti ini:


Atribusi Anda berupa clapping, sharing, ngasih komentar, dan following blog ini dapat menimbulkan efek samping berupa semangat menulis yang menggebu bagi saya

Modern Web App

Web Development with Google's Web Technologies and Modern standards

R. Kukuh

Written by

R. Kukuh

Senior Software Development Learning Facilitator at Apple Developer Academy @ UC

Modern Web App

Web Development with Google's Web Technologies and Modern standards

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade