Reatividade de Condições no Angular

A reatividade também funcionará com as condições ngIf. Isso significa que podemos mostrar ou ocultar um bloco dependendo do que está contido na propriedade da classe.

Vamos testar na prática. Suponha que temos o seguinte bloco

<div>
	texto
</div>

Vamos mostrar ou ocultá-lo por uma condição:

<div *ngIf="isShow">
	texto
</div>

Agora, vamos criar dois botões. Ao clicar no primeiro, mostraremos nosso bloco, e ao clicar no segundo - ocultaremos:

<button (click)="show()">
	mostrar
</button>
<button (click)="hide()">
	ocultar
</button>

Vamos adicionar à classe do componente uma propriedade que irá controlar se o bloco está visível ou não:

export class AppComponent {
	public isShow: boolean = true;
}

E agora vamos escrever a implementação dos nossos métodos para mostrar e ocultar o bloco:

export class AppComponent {
	public isShow: boolean = true;
	
	public show(): void {
		this.isShow = true;
	}
	public hide(): void {
		this.isShow = false;
	}
}

Crie um botão, cujo clique irá alternar o bloco: mostrar, se estiver oculto, e ocultar, se estiver visível.