Legarea stilurilor CSS în Angular

În Angular, de asemenea, se pot adăuga direct stiluri pentru un bloc. Acest lucru se face cu ajutorul unui atribut al tag-ului, scris în următorul format:

html[style.styleProperty]="valoarea proprietății"

În acest caz, numele proprietăților CSS care conțin un liniuță în interior, în cazul nostru vor fi scrise în camelCase. Să vedem cu exemple cum funcționează acest lucru.

Exemplu

Să setăm fundalul unui element:

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

Exemplu

Să presupunem că avem o proprietate care conține culoarea de fundal:

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

Să aplicăm această proprietate ca valoare pentru stil:

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

Exemplu

Să presupunem că avem o proprietate booleană:

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

Vom lega diferite valori ale proprietății CSS în funcție de conținutul proprietății booleene. Vom folosi pentru aceasta operatorul ternar:

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

Sarcini practice