Binding Massal Kelas CSS di Angular

Dengan menggunakan direktif ngClass, kita dapat mengaktifkan dan menonaktifkan sekumpulan kelas CSS sekaligus dalam sebuah tag. Direktif ini menerima sebuah objek sebagai nilai, di mana kunci-kuncinya adalah nama kelas, dan nilainya adalah nilai boolean. Sebuah kelas akan diaktifkan jika nilainya diset ke true, dan dinonaktifkan jika false.

Mari kita lihat dalam praktiknya. 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 [ngClass]="{blue: true, bold: false}">
	text
</div>

Contoh

Misalkan status kelas disimpan dalam properti kelas:

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

Mari kita ikat visibilitas kelas tergantung pada nilai properti kita:

<div [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

Contoh

Sebuah properti dapat berisi seluruh objek dengan kelas-kelas dan statusnya:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Mari ikat objek ini ke blok kita:

<div [ngClass]="styles">
	text
</div>

Contoh

Nilai untuk objek kita bisa didapatkan dari properti kelas lainnya:

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

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Mari ikat objek ini ke blok kita:

<div [ngClass]="styles">
	text
</div>

Tugas Praktis

Buatlah dua kelas CSS. Misalkan salah satunya mendefinisikan latar belakang blok, dan yang lainnya - ukuran font.

Buatlah dua tombol. Misalkan klik pada tombol pertama meng-toggle kelas pertama, dan klik pada tombol kedua - meng-toggle kelas kedua.