Pengikatan Kelas CSS dalam Angular

Dalam Angular, anda boleh menghidupkan dan mematikan penerapan kelas CSS untuk sesuatu blok. Ini dilakukan dengan menggunakan atribut tag, yang ditulis dalam format berikut:

[class.nama_kelas]="true atau false"

Mari kita lihat dalam praktik. Katakan kita mempunyai kelas-kelas berikut:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Mari kita lihat dengan contoh, bagaimana untuk menghidupkan dan mematikan kelas-kelas ini untuk sesuatu blok.

Contoh

Hidupkan satu kelas dan matikan kelas yang lain:

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

Contoh

Katakan keadaan kelas disimpan dalam sifat-sifat kelas:

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

Ikatkan keterlihatan kelas bergantung kepada nilai sifat-sifat kita:

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

Masalah Praktikal

Diberi kelas CSS berikut:

.hidden {
	visibility: hidden;
}

Ikatkan kelas ini kepada blok. Buatkan tombol, yang apabila ditekan akan menyembunyikan atau memaparkan blok tersebut.