Dynamisk ændring af stilarter i Angular

Med ngClass og ngStyle direktiverne kan du binde udtryk til elementer, hvilket vil lade vores stilarter ændre sig dynamisk.

Lad os gøre det, så teksten skjules eller vises ved hjælp af active egenskaben i komponentens klasse:

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

For at gøre dette skriver vi en toggle funktion, som skiftevis vil aktivere eller deaktivere denne egenskab:

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

I komponentens CSS-fil definerer vi følgende stil til klassen:

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

I komponentens skabelon laver vi en div, og tilføjer CSS-klassen hidden til den, som vil blive aktiveret eller deaktiveret afhængigt af active egenskaben fra komponentens klasse:

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

Lad os også lave en knap, hvor et klik vil kalde toggle metoden, som viser eller skjuler vores komponent:

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