Stílusok dinamikus módosítása Angularban

Az ngClass és ngStyle direktívákkal kifejezéseket köthetünk az elemekhez, aminek köszönhetően a stílusaink dinamikusan változni fognak.

Tegyük úgy, hogy a szöveg eltűjön vagy megjelenjen a active tulajdonság segítségével a komponens osztályában:

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

Ehhez írjuk meg a toggle függvényt, amely felváltva be- vagy kikapcsolja ezt a tulajdonságot:

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

A komponens CSS fájlában adjuk meg a következő stílust az osztálynak:

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

A komponens template-jében készítsünk egy div-et, és adjunk hozzá egy hidden CSS osztályt, amely be- vagy kikapcsolódik a komponens osztályának active tulajdonságától függően:

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

Készítsünk egy gombot is, amelyre kattintva meghívódik a toggle metódus, megjelenítve vagy elrejtve a komponensünket:

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