Massebinding av CSS-klasser i Angular
Med direktivet ngClass kan man
slå av og på en samling CSS-klasser
i en tagg. Direktivet tar imot et objekt
som verdi, hvor nøklene er klassene, og
verdiene er boolske verdier. Klassen vil
være aktivert hvis den er satt til verdien
true, og deaktivert hvis 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 vi slår av og på disse klassene for en blokk.
Eksempel
La oss aktivere en klasse og deaktivere en annen:
<div [ngClass]="{blue: true, bold: false}">
text
</div>
Eksempel
La tilstandene til klassene lagres i egenskapene 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 [ngClass]="{blue: isBlue, bold: isBold}">
text
</div>
Eksempel
I en egenskap kan det være et helt objekt med klasser og tilstander:
export class AppComponent {
public styles = {
blue: false,
bold: true,
}
}
La oss binde dette objektet til vår blokk:
<div [ngClass]="styles">
text
</div>
Eksempel
Man kan hente verdiene for objektet vårt fra andre egenskaper i klassen:
export class AppComponent {
public isBlue: boolean = false;
public isBold: boolean = true;
public styles = {
blue: this.isBlue,
bold: this.isBold,
}
}
La oss binde dette objektet til vår blokk:
<div [ngClass]="styles">
text
</div>
Praktiske oppgaver
Opprett to CSS-klasser. La en av dem definere bakgrunnen til en blokk, og den andre - skriftstørrelsen.
Lag to knapper. La et klikk på den første knappen toggle den første klassen, og et klikk på den andre - toggle den andre klassen.
