Dynamická zmena štýlov v Angular

Pomocou direktív ngClass a ngStyle je možné viazať výrazy k elementom, vďaka čomu sa naše štýly budu meniť dynamicky.

Urobme tak, aby sa text skrýval alebo zobrazoval pomocou vlastnosti active triedy komponentu:

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

Na to napíšeme funkciu toggle, ktorá bude striedavo zapínať alebo vypínať túto vlastnosť:

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

V CSS súbore komponentu nastavme nasledujúci štýl triede:

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

V template komponentu vytvorme div, a pridajme mu CSS triedu hidden, ktorá sa bude zapínať alebo vypínať v závislosti od vlastnosti active z triedy komponentu:

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

Urobme tiež tlačidlo, po kliknutí na ktoré sa bude volať metóda toggle, zobrazujúc alebo skrývajúc náš komponent:

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