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:

html[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:

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

Örnek

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

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

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

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

Örnek

Diyelim ki bir boolean özelliğimiz var:

app/app.component.tsexport 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:

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

Pratik Görevler