Binding van CSS-klasse in Angular

In Angular kan die toepassing van 'n CSS-klas vir 'n blok aangeskakel of afgeskakel word. Dit word gedoen met behulp van 'n kenmerk van die etiket, geskryf in die volgende formaat:

html[class.klas_naam]="waar of onwaar"

Laat ons in die praktyk kyk. Gestel ons het die volgende klasse:

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

Laat ons aan die hand van voorbeelde kyk hoe om hierdie klasse vir 'n blok aan en af te skakel.

Voorbeeld

Laat ons een klas aanskakel en 'n ander een afskakel:

app/app.component.html<div [class.blue]="true" [class.bold]="false">
  teks
</div>

Voorbeeld

Gestel die toestande van die klasse word gestoor in eienskappe van die klas:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

Laat ons die sigbaarheid van die klas bind afhangende van die waardes van ons eienskappe:

app/app.component.html<div [class.blue]="isBlue" [class.bold]="isBold">
  teks
</div>

Praktiese take

app/app.component.css.hidden {
  visibility: hidden;
}