Angular'da CSS Stili Bağlama

Angular'da ayrıca bir blok için doğrudan stil eklemek de mümkündür. Bu, etiketin aşağıdaki formatta yazılmış bir özniteliği kullanılarak yapılır:

[style.styleProperty]="property value"

Bu durumda, içinde tire bulunan CSS özellik adları bizim örneğimizde camelCase olarak yazılacaktır. Bunun nasıl çalıştığını örneklerle görelim.

Örnek

Bir elemana arka plan rengi verelim:

<div [style.backgroundColor]="'blue'">
	text
</div>

Diyelim ki arka plan rengini içeren bir özelliğimiz var:

export class AppComponent {
	public value: string = 'red';
}

Bu özelliği bir stil için değer olarak uygulayalım:

<div [style.backgroundColor]="value">
	text
</div>

Diyelim ki bir boolean özelliğimiz var:

export class AppComponent {
	public isActive: boolean = true;
}

Boolean özelliğin içeriğine bağlı olarak CSS özelliğine farklı değerler bağlayacağız. Bunun için üçlü operatörü kullanın:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

Bir blok verilmiştir. Blok üzerine ilk tıklamanın onu kırmızı renge, ikinci tıklamanın ise yeşil renge boyamasını sağlayın.

Bir blok ve bir buton verilmiştir. Butona basmanın bloğun genişliğini iki katına çıkarmasını sağlayın.