Binding Kelas CSS di Angular

Di Angular, Anda dapat mengaktifkan dan menonaktifkan penerapan kelas CSS untuk sebuah blok. Hal ini dilakukan dengan menggunakan atribut tag, yang ditulis dalam format berikut:

[class.nama_kelas]="true atau false"

Mari kita lihat dalam praktik. Misalkan kita memiliki kelas-kelas berikut:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Mari kita lihat contoh-contoh cara mengaktifkan dan menonaktifkan kelas-kelas ini untuk sebuah blok.

Contoh

Aktifkan satu kelas dan nonaktifkan kelas lainnya:

<div [class.blue]="true" [class.bold]="false">
	text
</div>

Contoh

Misalkan status kelas disimpan dalam properti kelas:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Ikat visibilitas kelas tergantung pada nilai properti kita:

<div [class.blue]="isBlue" [class.bold]="isBold">
	text
</div>

Tugas Praktis

Diberikan kelas CSS berikut:

.hidden {
	visibility: hidden;
}

Ikat kelas ini ke sebuah blok. Buatlah tombol yang ketika ditekan akan menyembunyikan atau menampilkan blok tersebut.