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>

Գործնական առաջադրանքներ