CSS stilių pririšimas Angular

Angular taip pat galima tiesiogiai pridėti stilius blokui. Tai daroma su tag'o atributo pagalba, parašytu šiame formate:

[style.styleProperty]="property value"

Be to, CSS savybių pavadinimai, kurie turi brūkšnelį viduje, mūsų atveju bus rašomi camelCase. Pažiūrėkime pavyzdžiais, kaip tai veikia.

Pavyzdys

Nustatykime elemento foną:

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

Tarkime, kad turime tam tikrą savybę, kuriame yra fono spalva:

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

Pritaikykime šią savybę kaip reikšmę stiliui:

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

Tarkime, kad turime tam tikrą loginę savybę:

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

Pririšime skirtingas CSS reikšmes savybei, priklausomai nuo loginės savybės turinio. Naudokime tam ternarinį operatorių:

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

Duotas blokas. Padarykite taip, kad pirmas paspaudimas ant bloko nudažytų jį raudona spalva, o antras paspaudimas - žalia.

Duotas blokas. Duotas mygtukas. Padarykite taip, kad mygtuko paspaudimas padvigubintų bloko plotį.