CSS ոճերի կապում Angular-ում

Angular-ում նաև հնարավոր է ուղղակիորեն ավելացնել ոճեր բլոկի համար: Դա արվում է տեգի ատրիբուտի միջոցով, որը գրված է հետևյալ ֆորմատով:

[style.ոճայինՀատկություն]="հատկության արժեք"

Այս դեպքում CSS հատկությունների անունները, որոնք ներսում ունեն դեֆիս, մեր դեպքում կգրվեն camelCase-ով: Եկեք օրինակներով տեսնենք, թե ինչպես է դա աշխատում:

Օրինակ

Տարրին տանք ֆոն.

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

Օրինակ

Ենթադրենք ունենք որոշակի հատկություն, որը պարունակում է ֆոնի գույն.

export class AppComponent {
	public value: string = 'red';
}

Կիրառենք այս հատկությունը որպես արժեք ոճի համար.

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

Օրինակ

Ենթադրենք ունենք որոշակի բուլյան հատկություն.

export class AppComponent {
	public isActive: boolean = true;
}

Կկապենք տարբեր արժեքներ CSS հատկությանը՝ կախված բուլյան հատկության բովանդակությունից: Դրա համար կօգտագործենք եռական օպերատորը.

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

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

Տրված է բլոկ: Արվի՛ր այնպես, որ առաջին կլիկը բլոկի վրա ներկի այն կարմիր գույնով, իսկ երկրորդ կլիկը՝ կանաչ:

Տրված է բլոկ: Տրված է կոճակ: Արվի՛ր այնպես, որ կոճակի վրա սեղմելը մեծացնի բլոկի լայնությունը երկու անգամ: