Angular-da CSS stillarynyň baglanyşyklandyrylmagy

Angular-da hem blok üçin göni stil goşup bolýar. Bu aşakdaky formatda ýazylan teg atributy arkaly amala aşyrylýar:

html[style.styleProperty]="property value"

Şol bir wagtyň özünde, içinde defisi bolan CSS aýratynlyklarynyň atlary, bizim ýagdaýymyzda camelCase görnüşinde ýazylar. Geliň, munyň nähili işleýändigini mysallar bilen göreliň.

Mysal

Elemente fon bereliň:

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

Mysal

Geliň, bizde fon reňkini saklaýan käbir aýratynlyk bar bolsun:

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

Bu aýratynlygy stiliň bahasy hökmünde ulanyň:

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

Mysal

Geliň, bizde käbir boolean aýratynlyk bar bolsun:

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

Boolean aýratynlygyň mazmunyndan çykyş edip, CSS aýratynlyklaryna dürli bahalar baglanyşdyrarys. Bunun üçin ternary operator-y ulanyň:

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

Amaly wezipeler