Databinding av CSS-klasser i Angular
I Angular kan man slå av og på bruk av CSS-klasse for en blokk. Dette gjøres ved hjelp av en tag-attributt, skrevet i følgende format:
[class.klassenavn]="true eller false"
La oss se på det i praksis. La oss si at vi har følgende klasser:
.blue {
color: blue;
}
.bold {
font-weight: bold;
}
La oss se på eksempler på hvordan man slår av og på disse klassene for en blokk.
Eksempel
La oss slå på én klasse og slå av en annen:
<div [class.blue]="true" [class.bold]="false">
text
</div>
Eksempel
La oss si at tilstandene til klassene lagres i egenskaper til klassen:
export class AppComponent {
public isBlue: boolean = true;
public isBold: boolean = false;
}
La oss binde synligheten til klassen avhengig av verdiene til våre egenskaper:
<div [class.blue]="isBlue" [class.bold]="isBold">
text
</div>
Praktiske oppgaver
Gitt følgende CSS-klasse:
.hidden {
visibility: hidden;
}
Bind denne klassen til en blokk. Lag en knapp som, ved å trykke på den, vil skjule eller vise blokken.
