CSS osztályok tömeges hozzárendelése Angularban

A ngClass direktíva segítségével egy HTML elemhez egyszerre több CSS osztályt kapcsolhatunk be vagy ki. A direktíva egy objektumot vár értékül, amelynek kulcsai az osztályok, értékei pedig logikai értékek. Egy osztály akkor lesz aktiválva, ha a hozzá tartozó érték true, és deaktiválva, ha false.

Nézzük a gyakorlatban. Tegyük fel, hogy a következő osztályaink vannak:

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

.bold {
  font-weight: bold;
}

Nézzünk példákat arra, hogyan lehet ezeket az osztályokat be- és kikapcsolni egy elemhez.

Példa

Kapcsoljunk be egy osztályt és kapcsoljunk ki egy másikat:

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

Példa

Tegyük fel, hogy az osztályok állapotai az osztály tulajdonságaiban tárolódnak:

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

Kössük az osztályok láthatóságát a tulajdonságaink értékeihez:

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

Példa

A tulajdonság maga is lehet egy teljes objektum osztályokkal és állapotaikkal:

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

Kössük ezt az objektumot az elemünkhöz:

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

Példa

Az objektumunk értékeit megkaphatjuk más osztály tulajdonságoktól is:

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

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

Kössük ezt az objektumot az elemünkhöz:

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

Gyakorlati feladatok