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:

export 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à:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

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

.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:

<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:

<button (click)="toggle()">
	toggle
</button>

Sono dati tre blocchi. Crea tre pulsanti, ciascuno dei quali attiverà/disattiverà il proprio blocco.