Dynamisk ändring av stilar i Angular

Med hjälp av direktiven ngClass och ngStyle kan man binda uttryck till element, vilket gör att våra stilar kommer att ändras dynamiskt.

Låt oss göra så att texten döljs eller visas med hjälp av egenskapen active i komponentklassen:

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

För att göra detta skriver vi funktionen toggle, som växelvis kommer att aktivera eller inaktivera denna egenskap:

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

I komponentens CSS-fil sätter vi följande stil för klassen:

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

I komponentens mall skapar vi en div, och lägger till CSS-klassen hidden, som kommer att aktiveras eller inaktiveras beroende på egenskapen active från komponentklassen:

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

Vi skapar också en knapp, vid klick på vilken metoden toggle kommer att anropas, och visa eller dölja vår komponent:

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