Cambio dinámico de estilos en Angular

Con la ayuda de las directivas ngClass y ngStyle puedes enlazar expresiones a elementos, gracias a lo cual nuestros estilos cambiarán dinámicamente.

Hagamos que el texto se oculte o se muestre usando la propiedad active de la clase del componente:

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

Para esto, escribamos la función toggle, que alternativamente activará o desactivará esta propiedad:

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

En el archivo CSS del componente, definimos el siguiente estilo para la clase:

.hidden {
	display: none;
}

En la plantilla del componente, hagamos un div, y agreguemos la clase CSS hidden, la cual se activará o desactivará dependiendo de la propiedad active de la clase del componente:

<div [ngClass]="{hidden: active}">
	text
</div>

Hagamos también un botón, al hacer clic en el cual se llamará al método toggle, mostrando u ocultando nuestro componente:

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

Se dan tres bloques. Crea tres botones, cada uno de los cuales alternará la visibilidad de su bloque.