Povezivanje CSS klasa u Angularu

U Angular-u možete uključivati i isključivati primenu CSS klase za blok. To se radi pomoću atributa taga, napisanog u sledećem formatu:

html[class.ime_klase]="true ili false"

Pogledajmo u praksi. Neka imamo sledeće klase:

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

.bold {
  font-weight: bold;
}

Pogledajmo na primerima kako uključiti i isključiti ove klase za blok.

Primer

Uključimo jednu klasu i isključimo drugu:

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

Primer

Neka stanja klasa budu sačuvana u svojstvima klase:

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

Povežimo vidljivost klase u zavisnosti od vrednosti naših svojstava:

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

Praktični zadaci

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