Masovno povezivanje CSS klasa u Angularu

Pomoću ngClass direktive možemo uključiti i isključiti ceo set CSS klasa na tagu. Direktiva kao vrednost prima objekat čiji su ključevi klase, a vrednosti - Bulove vrednosti. Klasa će biti uključena ako je za nju postavljena vrednost true, i isključena ako je false.

Hajde da pogledamo u praksi. Recimo da 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

Hajde da uključimo jednu klasu i isključimo drugu:

app/app.component.html<div [ngClass]="{blue: true, bold: false}">
  text
</div>

Primer

Recimo da stanja klasa budu č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 [ngClass]="{blue: isBlue, bold: isBold}">
  text
</div>

Primer

U svojstvu može biti ceo objekat sa klasama i stanjima:

app/app.component.tsexport class AppComponent {
  public styles = {
    blue: false,
    bold: true,
  }
}

Povežimo ovaj objekat sa našim blokom:

app/app.component.html<div [ngClass]="styles">
  text
</div>

Primer

Možemo vrednosti za naš objekat dobiti iz drugih svojstava klase:

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

  public styles = {
    blue: this.isBlue,
    bold: this.isBold,
  }
}

Povežimo ovaj objekat sa našim blokom:

app/app.component.html<div [ngClass]="styles">
  text
</div>

Praktični zadaci