Dynamisk endring av stiler i Angular

Med direktivene ngClass og ngStyle kan du binde uttrykk til elementer, noe som gjør at stilene våre vil endre seg dynamisk.

La oss gjøre slik at teksten skjules eller vises ved hjelp av egenskapen active i komponentklassen:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

For å gjøre dette skriver vi funksjonen toggle, som vekselvis vil slå på eller av denne egenskapen:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

I CSS-filen til komponenten setter vi følgende stil til klassen:

app/app.component.css.hidden {
  display: none;
}

I komponentmalen lager vi en div, og legger til CSS-klassen hidden, som vil bli slått på eller av avhengig av egenskapen active fra komponentklassen:

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

Vi lager også en knapp som, når den klikkes på, vil kalle metoden toggle, og vise eller skjule komponenten vår:

app/app.component.html<button (click)="toggle()">
  toggle
</button>