Dynamická změna stylů v Angular

Pomocí direktiv ngClass a ngStyle lze vázat výrazy k elementům, díky čemuž se naše styly budou měnit dynamicky.

Pojďme udělat tak, aby se text skrýval nebo zobrazoval pomocí vlastnosti active třídy komponenty:

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

K tomu napíšeme funkci toggle, která bude střídavě zapínat nebo vypínat tuto vlastnost:

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

V CSS souboru komponenty nastavíme následující styl třídě:

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

V templatu komponenty uděláme div, a přidáme mu CSS třídu hidden, která se bude zapínat nebo vypínat v závislosti na vlastnosti active z třídy komponenty:

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

Uděláme také tlačítko, po jehož stisknutí bude volána metoda toggle, zobrazující nebo skrývající naši komponentu:

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