Modificarea dinamică a stilurilor în Angular

Cu ajutorul directivelor ngClass și ngStyle, se pot lega expresii la elemente, datorită cărora stilurile noastre se vor modifica dinamic.

Haideți să facem astfel încât textul să fie ascuns sau afișat cu ajutorul proprietății active a clasei componentei:

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

Pentru aceasta, vom scrie funcția toggle, care va activa sau va dezactiva alternativ această proprietate:

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

În fișierul CSS al componentei, setăm următorul stil pentru clasă:

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

În template-ul componentei, vom face un div și îi vom adăuga clasa CSS hidden, care va fi activată sau dezactivată în funcție de proprietatea active din clasa componentei:

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

Să facem de asemenea un buton, la apăsarea căruia va fi apelată metoda toggle, afișând sau ascunzând componenta noastră:

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