CSS stillərinin Angular-da baglanması

Angular-da həmçinin birbaşa olaraq blok üçün stil əlavə etmək olar. Bu, aşağıdakı formatda yazılmış teq atributu vasitəsilə edilir:

html[style.stilXassəsi]="xassənin dəyəri"

Eyni zamanda, daxilində defis olan CSS xassələrinin adları bizim vəziyyətimizde camelCase-də yazılacaq. Gəlin nümunələr üzərində baxaq ki, bu necə işləyir.

Nümunə

Elementə fon təyin edək:

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

Nümunə

Tutaq ki, bizim fon rəngini ehtiva edən müəyyən bir xassəmiz var:

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

Gəlin bu xassəni stil üçün dəyər kimi tətbiq edək:

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

Nümunə

Tutaq ki, bizim müəyyən bir məntiqi xassəmiz var:

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

Məntiqi xassənin məzmunundan asılı olaraq müxtəlif dəyərləri CSS xassəsinə baglayacağıq. Bunun üçün ternar operatorundan istifadə edək:

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

Praktiki tapşırıqlar