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:

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

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

Shembull

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

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

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

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

Shembull

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

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

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

Detyra Praktike