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:

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

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

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

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

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

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

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

Existem três blocos. Crie três botões, cada um deles deve alternar a visibilidade do seu respectivo bloco.