Angularда CSS классларини оммовий боглов

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}">
  text
</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}">
  text
</div>

Мисол

Хусусиятда синфлар ва уларнинг ҳолатлари билан бутун объект бўлиши мумкин:

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

Бу объектни бизнинг блокга боглаймиз:

app/app.component.html<div [ngClass]="styles">
  text
</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">
  text
</div>

Амалий машқлар