Везивање CSS стилова у Angular

У Angular такође можете директно додавати стилове за блок. То се ради уз помоћ атрибута тага, написаног у следећем формату:

html[style.styleProperty]="property value"

При томе имена CSS својстава, која имају унутар себе цртицу, у нашем случају ће се писати у camelCase. Хајде да погледамо на примерима како то ради.

Пример

Поставимо позадину елементу:

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

Пример

Нека имамо неко својство, које садржи боју позадине:

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

Применимо то својство као вредност за стил:

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

Пример

Нека имамо неко булово својство:

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

Бићемо везати различите вредности CSS својству у зависности од садржаја буловог својства. Користимо за то тернарни оператор:

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

Практични задаци