Lidhja e Stileve CSS në Angular

Në Angular gjithashtu është e mundur të Shtohen stile direkt për një bllok. Kjo bëhet duke përdorur një atribut të tagut, të shkruar në formatin e mëposhtëm:

[style.styleProperty]="vlera e pronës"

Në këtë rast, emrat e vetive CSS që përmbajnë një vizë brenda tyre, në rastin tonë do të shkruhen në camelCase. Le të shohim me shembuj se si funksionon kjo.

Shembull

Le të vendosim një sfond për elementin:

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

Shembull

Le të themi se kemi një pronë që përmban ngjyrën e sfondit:

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

Le ta aplikojmë këtë pronë si vlerë për stilin:

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

Shembull

Le të themi se kemi një pronë boolean:

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

Le të lidhim vlera të ndryshme për vetinë CSS në varësi të përmbajtjes së pronës boolean. Le të përdorim për këtë operatorin ternar:

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

Detyra Praktike

Është dhënë një bllok. Bëni që klikimi i parë në bllok ta ngjyer atë në ngjyrë të kuqe, ndërsa klikimi i dytë - në të gjelbër.

Është dhënë një bllok. Është dhënë një buton. Bëni që klikimi në buton të rrisë gjerësinë e bllokut dy herë.