Povezovanje CSS razredov v Angular

V Angularju lahko vklopite-izklopite uporabo CSS razreda za blok. To naredite z uporabo atributa oznake, zapisanega v naslednji obliki:

html[class.ime_razreda]="true ali false"

Poglejmo si v praksi. Naj imamo naslednje razrede:

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

.bold {
  font-weight: bold;
}

Poglejmo si s primeri, kako vklopiti in izklopiti te razrede za blok.

Primer

Vklopimo en razred in izklopimo drugega:

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

Primer

Naj stanja razredov shranimo v lastnosti razreda:

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

Povežimo vidnost razreda odvisno od vrednosti naših lastnosti:

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

Praktične naloge

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