Mengubah Gaya secara Dinamis di Angular

Dengan menggunakan direktif ngClass dan ngStyle, kita dapat mengikat ekspresi ke elemen, sehingga gaya kita akan berubah secara dinamis.

Mari kita buat teks agar disembunyikan atau ditampilkan menggunakan properti active dari kelas komponen:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Untuk itu, tulis fungsi toggle, yang akan mengaktifkan atau menonaktifkan properti ini secara bergantian:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Dalam file CSS komponen, atur gaya berikut untuk kelas:

.hidden {
	display: none;
}

Di template komponen, buat sebuah div, dan tambahkan kelas CSS hidden ke dalamnya, yang akan dihidupkan atau dimatikan tergantung pada properti active dari kelas komponen:

<div [ngClass]="{hidden: active}">
	text
</div>

Buat juga tombol, yang ketika ditekan akan memanggil metode toggle, menampilkan atau menyembunyikan komponen kita:

<button (click)="toggle()">
	toggle
</button>

Diberikan tiga blok. Buat tiga tombol, masing-masing akan meng-toggle bloknya sendiri.