Dinamička promena stilova u Angularu

Pomoću direktiva ngClass i ngStyle možemo vezati izraze za elemente, zahvaljujući čemu će se naši stilovi menjati dinamički.

Hajde da napravimo da se tekst skriva ili prikazuje pomoću svojstva active klase komponente:

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

Za ovo napišimo funkciju toggle, koja će naizmenično uključivati ili isključivati ovo svojstvo:

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

U CSS fajlu komponente postavimo sledeći stil klasi:

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

U šablonu komponente napravimo div, i dodajmo mu CSS klasu hidden, koja će se uključivati ili isključivati u zavisnosti od svojstva active iz klase komponente:

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

Napravimo takođe dugme, čijim pritiskom će se pozivati metoda toggle, prikazujući ili skrivajući našu komponentu:

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