Angular'da Dinamik Stil Değişikliği

ngClass ve ngStyle direktifleri sayesinde ifadeleri elementlere bağlayabiliriz, böylece stillerimiz dinamik olarak değişecek.

Bileşenin active özelliği kullanılarak metnin gizlenmesi veya gösterilmesini sağlayalım:

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

Bunun için, bu özelliği dönüşümlü olarak açıp kapatacak olan toggle fonksiyonunu yazalım:

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

Bileşenin CSS dosyasında şu stili tanımlayalım:

.hidden {
	display: none;
}

Bileşen şablonunda bir div oluşturalım ve bileşen sınıfındaki active özelliğine bağlı olarak açılıp kapanacak hidden CSS sınıfını ekleyelim:

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

Ayrıca, tıklandığında toggle yöntemini çağırarak bileşenimizi gösteren veya gizleyen bir buton yapalım:

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

Üç blok verilmiştir. Her biri kendi bloğunu açıp kapatan üç buton yapın.