Прывязка CSS стыляў у Angular

У Angular таксама можна непасрэдна дадаваць стылі для блока. Гэта робіцца з дапамогай атрыбута тэга, напісанага ў наступным фармаце:

html[style.стыляваяУласцівасць]="значэнне ўласцівасці"

Пры гэтым імёны 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>

Практычныя задачы