CSS-luokkien sidonta Angularissa

Angularissa voit ottaa CSS-luokkien käytön käyttöön ja pois käytöstä elementeille. Tämä tehdään elementin attribuutilla, joka on kirjoitettu seuraavassa muodossa:

[class.luokan_nimi]="true tai false"

Katsotaan käytännössä. Oletetaan, että meillä on seuraavat luokat:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Katsotaan esimerkein, kuinka ottaa näitä luokkia käyttöön ja pois käytöstä elementeille.

Esimerkki

Otetaan yksi luokka käyttöön ja poistetaan toinen käytöstä:

<div [class.blue]="true" [class.bold]="false">
	teksti
</div>

Esimerkki

Oletetaan, että luokkien tilat tallennetaan luokan ominaisuuksiin:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Sidotaan luokan näkyvyys riippuen ominaisuuksiemme arvoista:

<div [class.blue]="isBlue" [class.bold]="isBold">
	teksti
</div>

Käytännön tehtävät

Annettu seuraava CSS-luokka:

.hidden {
	visibility: hidden;
}

Sido tämä luokka elementtiin. Tee painike, jota painamalla elementti piilotetaan tai näytetään.