CSS stilu piesaiste Angular

Angular arī var tieši pievienot stilus blokam. Tas tiek darīts ar elementa atribūta palīdzību, kas rakstīts sekojošā formātā:

html[style.styleProperty]="property value"

Šajā gadījumā CSS īpašību nosaukumi, kuriem ir defīts iekšpusē, mūsu gadījumā tiks rakstīti camelCase. Apskatīsim piemēros, kā tas strādā.

Piemērs

Iestatīsim elementa fonu:

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

Piemērs

Pieņemsim, ka mums ir kāda īpašība, kas satur fona krāsu:

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

Pielietosim šo īpašību kā vērtību stilam:

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

Piemērs

Pieņemsim, ka mums ir kāda Būla īpašība:

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

Piesaistīsim dažādas CSS vērtības īpašībai atkarībā no Būla īpašības satura. Izmantosim tam ternāro operatoru:

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

Praktiskie uzdevumi