Povezivanje CSS stilova u Angular-u

U Angular-u takođe možemo direktno dodavati stilove za blok. Ovo se radi pomoću atributa taga, napisanog u sledećem formatu:

html[style.styleProperty]="property value"

Pritim imena CSS svojstava, koja imaju unutar sebe defis, u našem slučaju će se pisati u camelCase-u. Hajde da pogledamo na primerima, kako ovo radi.

Primer

Podesimo pozadinu elementu:

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

Primer

Neka imamo neko svojstvo, koje sadrži boju pozadine:

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

Primenimo ovo svojstvo kao vrednost za stil:

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

Primer

Neka imamo neko bulovsko svojstvo:

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

Povezivaćemo različite vrednosti CSS svojstvu u zavisnosti od sadržaja bulovskog svojstva. Koristimo za ovo ternarni operator:

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

Praktični zadaci