Modificação Dinâmica de Estilos no Angular

Com as diretivas ngClass e ngStyle, podemos vincular expressões aos elementos, permitindo que nossos estilos sejam alterados dinamicamente.

Vamos fazer com que o texto seja ocultado ou exibido usando a propriedade active da classe do componente:

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

Para isso, vamos escrever a função toggle, que alternará esta propriedade:

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

No arquivo CSS do componente, definimos o seguinte estilo para a classe:

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

No template do componente, vamos criar uma div e adicionar a ela a classe CSS hidden, que será ativada ou desativada dependendo da propriedade active da classe do componente:

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

Vamos também criar um botão que, ao ser clicado, chamará o método toggle, exibindo ou ocultando nosso componente:

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