Wiązanie stylów CSS w Angularze

W Angularze można również bezpośrednio dodawać style dla bloku. Robi się to za pomocą atrybutu tagu, napisanego w następującym formacie:

html[style.styleProperty]="property value"

Jednocześnie nazwy właściwości CSS, które mają w sobie myślnik, w naszym przypadku będą pisane w <camelCase>. Spójrzmy na przykładach, jak to działa.

Przykład

Ustawmy tło elementowi:

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

Przykład

Załóżmy, że mamy pewną właściwość, zawierającą kolor tła:

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

Zastosujmy tę właściwość jako wartość dla stylu:

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

Przykład

Załóżmy, że mamy pewną właściwość boolowską:

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

Będziemy wiązać różne wartości właściwości CSS w zależności od zawartości właściwości boolowskiej. Użyjmy do tego operatora trójargumentowego:

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

Zadania praktyczne