Гурӯҳҳои CSS-ро дар Angular ба таври оммавӣ илова кардан

Бо ёрии директиви ngClass шумо метавонед дар як тег якбора як маҷмӯи гурӯҳҳои CSS-ро фаъол ва ғайрифаъол кунед. Директива объектро қимат мегирад, ки калидҳои он гурӯҳҳо хоҳанд буд ва қиматҳо - арзишҳои булӣ мебошанд. Гурӯҳ фаъол мешавад, агар барои он арзиши true таъин шуда бошад ва ғайрифаъол, агар false бошад.

Биёед дар амал бубинем. Фарз мекунем, ки мо гурӯҳҳои зеринро дорем:

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

.bold {
  font-weight: bold;
}

Биёед дар мисолҳо бубинем, ки чӣ гуна ин гурӯҳҳоро барои блок фаъол ва ғайрифаъол кунем.

Мисол

Як гурӯҳро фаъол ва дигареро ғайрифаъол мекунем:

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

Мисол

Фарз мекунем, ки ҳолатҳои гурӯҳҳо дар хусусиятҳои класс нигоҳ дошта мешаванд:

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

Намоёнии гурӯҳро вобаста ба арзишҳои хусусиятҳои мо мебандем:

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

Мисол

Дар як хусусият метавонад объекти комил бо гурӯҳҳо ва ҳолатҳо бошад:

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

Ин объектро ба блоки мо мебандем:

app/app.component.html<div [ngClass]="styles">
  матн
</div>

Мисол

Метавон арзишҳоро барои объекти мо аз хусусиятҳои дигари класс ба даст овард:

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

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

Ин объектро ба блоки мо мебандем:

app/app.component.html<div [ngClass]="styles">
  матн
</div>

Вазифаҳои амалӣ