CSS-tyylien sidonta Angularissa

Angularissa voidaan myös suoraan lisätä tyylejä lohkolle. Tämä tehdään tagi-attribuutilla, joka on kirjoitettu seuraavassa muodossa:

[style.styleProperty]="property value"

CSS-ominaisuuksien nimet, joissa on välimerkki, kirjoitetaan tässä tapauksessa camelCase-muodossa. Katsotaan esimerkein, miten tämä toimii.

Esimerkki

Asetetaan tausta elementille:

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

Olkoon meillä jokin ominaisuus, joka sisältää taustavärin:

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

Käytetään tätä ominaisuutta arvona tyylille:

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

Olkoon meillä jokin totuusarvoinen ominaisuus:

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

Sidotaan erilaisia arvoja CSS- ominaisuuteen totuusarvon sisällöstä riippuen. Käytetään tähän ternary operatoria:

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

Annettu lohko. Tee niin, että ensimmäinen klikkaus lohkoon värjää sen punaiseksi, ja toinen klikkaus - vihreäksi.

Annettu lohko. Annettu painike. Tee niin, että painikkeen painaminen kaksinkertaistaa lohkon leveyden.