Tyylien dynaaminen muuttaminen Angularissa

ngClass- ja ngStyle-direktiiveilla voidaan sidonta lausekkeita elementteihin, minkä ansiosta tyylimme muuttuvat dynaamisesti.

Tehdään tekstistä niin, että se piilotetaan tai näytetään komponentin luokan active- ominaisuuden avulla:

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

Kirjoitetaan tätä varten toggle-funktio, joka vuorotellen ottaa käyttöön tai poistaa käytöstä kyseisen ominaisuuden:

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

Komponentin CSS-tiedostossa asetetaan seuraava tyyli luokalle:

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

Komponentin templaatissa tehdään div, ja lisätään siihen CSS-luokka hidden, joka otetaan käyttöön tai poistetaan käytöstä riippuen komponentin luokan active-ominaisuudesta:

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

Tehdään myös painike, jota painamalla kutsutaan toggle-metodia, näyttäen tai piilottaen komponenttimme:

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