CSS-klasside hulgiline seostamine Angularis

Direktiivi ngClass abil saab sisse ja välja lülitada korraga terve kogumi CSS-klasse. Direktiiv võtab väärtuseks objekti, mille võtmed on klassid ja väärtused on Loogilised väärtused. Klass lülitatakse sisse, kui selle jaoks on seatud väärtus true, ja välja, kui false.

Vaatame seda praktikas. Oletame, et meil on järgmised klassid:

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

.bold {
  font-weight: bold;
}

Vaatame näidete varal, kuidas need klassid ploki jaoks sisse ja välja lülitada.

Näide

Lülitame ühe klassi sisse ja teise välja:

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

Näide

Oletame, et klasside olekud on salvestatud klassi omadustesse:

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

Seome klassi nähtavuse sõltuvalt meie omaduste väärtustest:

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

Näide

Omadus võib sisaldada tervet objekti koos klasside ja olekutega:

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

Seome selle objekti oma plokiga:

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

Näide

Me saame oma objekti väärtused hankida teistest klassi omadustest:

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

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

Seome selle objekti oma plokiga:

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

Praktilised ülesanded