CSS-i stiilide sidumine Angularis

Angularis on võimalik ka otse lisada stiile plokile. Seda tehakse järgmises vormingus kirjutatud sildi atribuudi abil:

[style.styleProperty]="property value"

Sel juhul kirjutatakse CSS-i atribuutide nimed, millel on sidekriipsu sees, meie puhul camelCase'ina. Vaatame näidetega, kuidas see töötab.

Näide

Määrame elemendile tausta:

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

Oletame, et meil on mingi atribuut, mis sisaldab tausta värvi:

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

Rakendame seda atribuuti väärtusena stiilile:

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

Oletame, et meil on mingi boolean atribuut:

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

Seome erinevad väärtused CSS atribuudile sõltuvalt boolean atribuudi sisust. Kasutame selleks ternaarset operaatorit:

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

Antud plokk. Tehke nii, et esimesel klõpsul plokk värvub punaseks, ja teisel klõpsul - roheliseks.

Antud plokk. Antud nupp. Tehke nii, et nupu vajutamine suurendaks ploki laiust kaks korda.