Lidhja e shumëfishtë e klasave CSS në Angular

Me ndihmën e direktivës ngClass mund të aktivizojmë dhe çaktivizojmë një grup klasash CSS njëkohësisht në një tag. Direktiva merr si vlerë një objekt, ku çelësat e tij do të jenë klasat, dhe vlerat e tij - vlera boolean. Klasa do të aktivizohet nëse për të është vendosur vlera true, dhe do të çaktivizohet nëse është false.

Le ta shohim në praktikë. Le të supozojmë se kemi klasat e mëposhtme:

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

.bold {
  font-weight: bold;
}

Le të shohim me shembuj se si të aktivizojmë dhe çaktivizojmë këto klasa për një bllok.

Shembull

Le të aktivizojmë një klasë dhe të çaktivizojmë një tjetër:

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

Shembull

Le të supozojmë se gjendjet e klasave ruhen në vetitë e klasës:

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

Le të lidhim dukshmërinë e klasës në varësi të vlerave të vetive tona:

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

Shembull

Në veti mund të ketë një objekt të tërë me klasat dhe gjendjet e tyre:

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

Le ta lidhim këtë objekt me bllokun tonë:

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

Shembull

Vlerat për objektin tonë mund të merren nga veti të tjera të klasës:

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

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

Le ta lidhim këtë objekt me bllokun tonë:

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

Detyra praktike