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:
[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:
<div [style.backgroundColor]="'blue'">
text
</div>
Primer
Neka imamo neko svojstvo, koje sadrži boju pozadine:
export class AppComponent {
public value: string = 'red';
}
Primenimo ovo svojstvo kao vrednost za stil:
<div [style.backgroundColor]="value">
text
</div>
Primer
Neka imamo neko bulovsko svojstvo:
export 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:
<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
text
</div>
Praktični zadaci
Dat je blok. Uradite tako da prvi klik na blok ga oboji u crvenu boju, a drugi klik - u zelenu.
Dat je blok. Data je dugme. Uradite tako da pritiskom na dugme se udvostruči širina bloka.
