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:

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

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

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

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

app/app.component.css.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:

app/app.component.html<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:

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