Angular'da CSS Sınıflarını Toplu Bağlama

ngClass direktifi ile bir etiketteki bir dizi CSS sınıfını açıp kapatabilirsiniz. Direktif, anahtarlarının sınıflar olduğu ve değerlerinin boolean değerler olduğu bir nesneyi değer olarak alır. Bir sınıf, değeri true olarak ayarlandığında etkin olacak, false olarak ayarlandığında ise devre dışı kalacaktır.

Pratikte görelim. Aşağıdaki sınıflara sahip olduğumuzu varsayalım:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Bir blok için bu sınıfları nasıl açıp kapatacağımızı örneklerle görelim.

Örnek

Bir sınıfı açalım ve diğerini kapatalım:

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

Örnek

Sınıf durumlarının bileşen sınıfının özelliklerinde saklandığını varsayalım:

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

Sınıfın görünürlüğünü özelliklerimizin değerlerine bağlı olarak ayarlayalım:

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

Örnek

Bir özellik, sınıfları ve durumlarını içeren tam bir nesne olabilir:

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

Bu nesneyi bloğumuza bağlayalım:

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

Örnek

Nesnemiz için değerler, bileşen sınıfının diğer özelliklerinden alınabilir:

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

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

Bu nesneyi bloğumuza bağlayalım:

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

Pratik Görevler

İki CSS sınıfı oluşturun. Birinin bir bloğun arka planını tanımlamasına, diğerinin ise yazı tipi boyutunu tanımlamasına izin verin.

İki buton yapın. Birinci butona tıklamanın birinci sınıfı açıp kapamasına, ikinci butona tıklamanın ise ikinci sınıfı açıp kapamasına izin verin.