Reattività delle condizioni in Angular

La reattività funzionerà anche con le condizioni ngIf. Ciò significa che possiamo mostrare o nascondere un blocco in base a ciò che è contenuto nella proprietà della classe.

Proviamo nella pratica. Supponiamo di avere il seguente blocco

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

Mostriamolo o nascondiamolo in base a una condizione:

app/app.component.html<div *ngIf="isShow">
  text
</div>

Creiamo ora due pulsanti. Al click sul primo mostreremo il nostro blocco, mentre al click sul secondo - lo nasconderemo:

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

Aggiungiamo alla classe del componente una proprietà che regolerà se il blocco è mostrato o meno:

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

E ora scriviamo l'implementazione dei nostri metodi per mostrare e nascondere il blocco:

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