CSS-stylbinding in Angular

In Angular kan jy ook direk style vir 'n blok byvoeg. Dit word gedoen met behulp van 'n etiket-attribuut, geskryf in die volgende formaat:

[style.styleProperty]="property value"

Die name van CSS-eienskappe wat 'n koppelteken in hulself het, sal in ons geval geskryf word in camelCase. Kom ons kyk na voorbeelde van hoe dit werk.

Voorbeeld

Laat ons die agtergrond vir 'n element stel:

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

Voorbeeld

Kom ons sê ons het 'n sekere eienskap wat die agtergrondkleur bevat:

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

Laat ons hierdie eienskap toepas as waarde vir die styl:

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

Voorbeeld

Kom ons sê ons het 'n sekere Boole-eienskap:

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

Ons sal verskillende waardes vir die CSS eienskap bind afhangende van die inhoud van die Boole-eienskap. Ons sal die ternêre operateur hiervoor gebruik:

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

Praktiese take

Gegee 'n blok. Maak so dat die eerste klik op die blok dit rooi kleur, en die tweede klik - groen.

Gegee 'n blok. Gegee 'n knoppie. Maak so dat om op die knoppie te druk die wydte van die blok twee keer vergroot.