Angular-da CSS klaslarynyň köpçülikleýin baglanyşdyrylmagy

ngClass direktiwasy bilen teg-de birwagtda birnäçe CSS klaslaryny işjeňleşdirip we ýapyp bolýar. Direktiwa baha hökmünde açar hökmünde klaslar bolan, bahasy bolsa boolean bahalar bolan bir obýekdi kabul edýär. Klas işjeňleşdiriler, eger onuň üçin baha true bolsa, we ýapylar, eger false bolsa.

Amaly işde göreli. Bizde aşakdaky klaslar bar bolsun:

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

.bold {
  font-weight: bold;
}

Bu klaslary blok üçin nädip işjeňleşdirmeli we ýapmalydygyny mysallar boýunça göreli.

Mysal

Bir klasy işjeňleşdirip, beýlekisini ýapalyň:

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

Mysal

Klaslaryň ýagdaýlary klasyň aýratynlyklarynda saklanyň:

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

Klasyň görünmegini biziň aýratynlyklarymyzyň bahalaryna baglalyň:

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

Mysal

Aýratynlykda klaslar we ýagdaýlar bilen doly bir obýekt bolup biler:

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

Bu obýekti biziň blokymyza baglalyň:

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

Mysal

Obýektimiz üçin bahalary klasyň beýleki aýratynlyklaryndan alyp bolýar:

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

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

Bu obýekti biziň blokymyza baglalyň:

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

Amaly wezîpeler