Lidhja e klasave CSS në Angular

Në Angular mund të aktivizosh dhe çaktivizosh aplikimin e një klase CSS për një bllok. Kjo bëhet duke përdorur atributin e etiketës, të shkruar në formatin vijues:

html[class.emri_klasës]="true ose false"

Le ta shohim në praktikë. Le të supozojmë që kemi klasat e mëposhtme:

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

.bold {
  font-weight: bold;
}

Le të shohim me shembuj se si të aktivizojmë dhe çaktivizojmë këto klasa për një bllok.

Shembull

Le të aktivizojmë një klasë dhe të çaktivizojmë një tjetër:

app/app.component.html<div [class.blue]="true" [class.bold]="false">
  text
</div>

Shembull

Le të supozojmë se gjendjet e klasave ruhen në vetitë e klasës:

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

Le të lidhim dukshmërinë e klasës në varësi të vlerave të vetive tona:

app/app.component.html<div [class.blue]="isBlue" [class.bold]="isBold">
  text
</div>

Detyra praktike

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