Reactividad de condiciones en Angular

La reactividad también funcionará con las condiciones ngIf. Esto significa que podemos mostrar u ocultar un bloque dependiendo de lo que contenga la propiedad de la clase.

Probemos en la práctica. Supongamos que tenemos el siguiente bloque

<div>
	text
</div>

Vamos a mostrarlo u ocultarlo según una condición:

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

Ahora hagamos dos botones. Al hacer clic en el primero mostraremos nuestro bloque, y al hacer clic en el segundo, lo ocultaremos:

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

Añadamos a la clase del componente una propiedad que regule si el bloque está mostrado o no:

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

Y ahora escribamos la implementación de nuestros métodos para mostrar y ocultar el bloque:

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

Cree un botón, al pulsar el cual se alternará el bloque: mostrarlo si está oculto, y ocultarlo si está mostrado.