Angular-da CSS synplarynyň baglanyşygy

Angular-da CSS synpynyň ulanylyşyny açyp ýapmak mümkin. Bu iş aşakdaky formatda ýazylan teg atributy arkaly amala aşyrylýar:

html[class.synp_ady]="dogry ýa-da ýalňyş"

Amalyýetde göreliň. Bizde aşakdaky synplar bar diýeliň:

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

.bold {
  font-weight: bold;
}

Bu synplaryň blok üçin nädip açylýandygy we ýapylýandygy barada mysallara serediň.

Mysal

Bir synpy açalyň we beýlekesini ýapalyň:

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

Mysal

Synplaryň ýagdaýlary klas ýalykda saklanylýar diýeliň:

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

Synpyň görünmekligini öz ýalyklarymyzyň bahalaryna görä baglalyň:

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

Amaly wezipeler

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