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}">
  текст
</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>

Практикалық тапсырмалар