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

app/app.component.html<div>
  text
</div>

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

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

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

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
}

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

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}