Kuunganisha Mitindo ya CSS kwenye Angular

Kwenye Angular pia inawezekana kuongeza mitindo kwa moja kwa moja kwa kipande. Hii inafanywa kwa kutumia sifa ya lebo, iliyoandikwa kwa muundo ufuatao:

[style.styleProperty]="property value"

Wakati huu, majina ya sifa za CSS ambazo zina kistari ndani yake, kwa upande wetu zitaandikwa kwa camelCase. Tuangalie kwa mifano, jinsi hii inavyofanya kazi.

Mfano

Weka mandharinyuma kwa kipengele:

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

Mfano

Hebu tuchukulie tuna sifa fulani, inayobeba rangi ya mandharinyuma:

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

Tutumie sifa hii kama thamani kwa mtindo:

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

Mfano

Hebu tuchukulie tuna sifa fulani ya boolean:

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

Tutaunganisha thamani tofauti za CSS kwa sifa kulingana na yaliyomo kwenye sifa ya boolean. Tutumie kwa hili kiendeshaji tenari:

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

Kazi za Vitendo

Kipande kimetolewa. Fanya ili kubofya kwa kwanza kwenye kipande kiwe rangi nyekundu, na kubofya kwa pili - kwenye kijani.

Kipande kimetolewa. Kitufe kimetolewa. Fanya ili kubonyeza kitufe kuongeza upana wa kipande mara mbili.