CSS-klasside hulgiline seostamine Angularis
Direktiivi ngClass abil saab
sisse ja välja lülitada korraga terve kogumi
CSS-klasse. Direktiiv võtab väärtuseks
objekti, mille võtmed on klassid ja
väärtused on Loogilised väärtused. Klass
lülitatakse sisse, kui selle jaoks on seatud väärtus
true, ja välja, kui false.
Vaatame seda praktikas. Oletame, et meil on järgmised klassid:
.blue {
color: blue;
}
.bold {
font-weight: bold;
}
Vaatame näidete varal, kuidas need klassid ploki jaoks sisse ja välja lülitada.
Näide
Lülitame ühe klassi sisse ja teise välja:
<div [ngClass]="{blue: true, bold: false}">
text
</div>
Näide
Oletame, et klasside olekud on salvestatud klassi omadustesse:
export class AppComponent {
public isBlue: boolean = true;
public isBold: boolean = false;
}
Seome klassi nähtavuse sõltuvalt meie omaduste väärtustest:
<div [ngClass]="{blue: isBlue, bold: isBold}">
text
</div>
Näide
Omadus võib sisaldada tervet objekti koos klasside ja olekutega:
export class AppComponent {
public styles = {
blue: false,
bold: true,
}
}
Seome selle objekti oma plokiga:
<div [ngClass]="styles">
text
</div>
Näide
Me saame oma objekti väärtused hankida teistest klassi omadustest:
export class AppComponent {
public isBlue: boolean = false;
public isBold: boolean = true;
public styles = {
blue: this.isBlue,
bold: this.isBold,
}
}
Seome selle objekti oma plokiga:
<div [ngClass]="styles">
text
</div>
Praktilised ülesanded
Looge kaks CSS-klassi. Olgu üks neist määratleb ploki tausta, ja teine - fondi suuruse.
Tehke kaks nuppu. Olgu esimese nupu vajutus lülitab esimest klassi sisse/välja, ja teise nupu vajutus - lülitab teist klassi sisse/välja.