Modifica Dinamica degli Stili in Angular

Con le direttive ngClass e ngStyle puoi collegare espressioni agli elementi, permettendo ai nostri stili di cambiare dinamicamente.

Facciamo in modo che il testo venga nascosto o mostrato utilizzando la proprietà active della classe del componente:

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

Per fare questo, scriviamo la funzione toggle, che alternerà l'attivazione o la disattivazione di questa proprietà:

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

Nel file CSS del componente, impostiamo il seguente stile per la classe:

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

Nel template del componente, creiamo un div e aggiungiamogli la classe CSS hidden, che verrà attivata o disattivata in base alla proprietà active della classe del componente:

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

Creiamo anche un pulsante, al click del quale verrà chiamato il metodo toggle, mostrando o nascondendo il nostro componente:

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