Dinamiese verandering van style in Angular

Met die direkatiewe ngClass en ngStyle kan jy uitdrukkings bind aan elemente, waardeur ons style dinamies sal verander.

Laat ons die teks laat verdwyn of wys met behulp van die active eienskap van die komponent se klas:

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

Skryf vir dit die toggle funksie, wat beurtelings hierdie eienskap sal aanskakel of afskakel:

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

In die komponent se CSS lêer stel ons die volgende style vir die klas:

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

In die komponent se templaat maak ons 'n div, en voeg daaraan die CSS klas hidden, wat aangeskakel of afgeskakel sal word afhangende van die active eienskap vanaf die komponent se klas:

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

Maak ook 'n knoppie, waarop geklik die toggle metode geroep sal word, wat ons komponent sal wys of verberg:

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