Бастанидани синфҳои CSS дар Angular

Дар Angular метавон истифодаи синфи CSS-ро барои блок фаъол ё ғайрифаъол кард. Ин бо ёрии атрибути тег, ки ба формати зерин навишта шудааст, иҷро карда мешавад:

html[class.номи_синф]="рост ё дурӯғ"

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

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

.bold {
  font-weight: bold;
}

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

Мисол

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

app/app.component.html<div [class.blue]="true" [class.bold]="false">
  матн
</div>

Мисол

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

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

Диданишавии синфро вобаста ба қиматҳои хосиятҳои худ мебастем:

app/app.component.html<div [class.blue]="isBlue" [class.bold]="isBold">
  матн
</div>

Масъалаҳои амалӣ

app/app.component.css.hidden {
  visibility: hidden;
}