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:

html[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:

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

Mfano

Hebu tuchukulie tuna sifa fulani, inayobeba rangi ya mandharinyuma:

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

Tutumie sifa hii kama thamani kwa mtindo:

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

Mfano

Hebu tuchukulie tuna sifa fulani ya boolean:

app/app.component.tsexport 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:

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

Kazi za Vitendo