CSS klases masveida piesaistīšana Angular

Izmantojot direktīvu ngClass, ir iespējams vienlaikus ieslēgt un izslēgt CSS klases kopu elementā. Direktīva kā vērtību pieņem objektu, kura atslēgas ir klases, bet vērtības ir Būla vērtības. Klase tiks ieslēgta, ja tai ir iestatīta vērtība true, un izslēgta, ja false.

Paskatīsimies praksē. Pieņemsim, ka mums ir šādas klases:

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

.bold {
  font-weight: bold;
}

Apskatīsim ar piemēriem, kā ieslēgt un izslēgt šīs klases blokam.

Piemērs

Ieslēgsim vienu klasi un izslēgsim otru:

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

Piemērs

Pieņemsim, ka klases stāvokļi tiek glabāti klases īpašībās:

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

Piesaistīsim klases redzamību atkarībā no mūsu īpašību vērtībām:

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

Piemērs

Īpašībā var būt vesels objekts ar klasēm un to stāvokļiem:

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

Piesaistīsim šo objektu mūsu blokam:

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

Piemērs

Objekta vērtības var iegūt no citām klases īpašībām:

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

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

Piesaistīsim šo objektu mūsu blokam:

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

Praktiskie uzdevumi