Množično povezovanje CSS razredov v Angular

Z direktivo ngClass lahko vklopimo in izklopimo v oznaki cel niz CSS razredov. Direktiva kot vrednost sprejme objekt, katerega ključi so razredi, vrednosti pa logične vrednosti. Razred bo vklopljen, če je zanj nastavljena vrednost true, in izklopljen, če je false.

Poglejmo si to v praksi. Naj imamo naslednje razrede:

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

.bold {
  font-weight: bold;
}

Poglejmo si s primeri, kako vklopiti in izklopiti te razrede za blok.

Primer

Vklopimo en razred in izklopimo drugega:

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

Primer

Naj stanja razredov hranijo v lastnostih razreda:

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

Povežimo vidnost razreda odvisno od vrednosti naših lastnosti:

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

Primer

V lastnosti je lahko cel objekt s razredi in stanji:

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

Povežimo ta objekt z našim blokom:

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

Primer

Vrednosti za naš objekt lahko dobimo iz drugih lastnosti razreda:

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

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

Povežimo ta objekt z našim blokom:

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

Praktične naloge