Dynamiczna zmiana stylów w Angularze

Za pomocą dyrektyw ngClass i ngStyle można powiązać wyrażenia z elementami, dzięki czemu nasze style będą zmieniać się dynamicznie.

Zróbmy tak, aby tekst ukrywał się lub pokazywał za pomocą właściwości active klasy komponentu:

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

W tym celu napiszmy funkcję toggle, która naprzemiennie będzie włączać lub wyłączać tę właściwość:

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

W pliku CSS komponentu ustawiamy następny styl klasie:

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

W templatce komponentu zróbmy diva i dodajmy mu klasę CSS hidden, która będzie włączana lub wyłączana w zależności od właściwości active z klasy komponentu:

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

Zróbmy również przycisk, po naciśnięciu którego będzie wywoływana metoda toggle, pokazując lub ukrywając nasz komponent:

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