Reaktivitet av villkor i Angular

Reaktivitet fungerar också med villkor ngIf. Det betyder att vi kan visa eller dölja ett block beroende på vad som finns i klassens egenskap.

Låt oss prova i praktiken. Låt oss anta att vi har följande block

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

Låt oss visa eller dölja det baserat på ett villkor:

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

Låt oss nu skapa två knappar. Vid klick på den första ska vi visa vårt block, och vid klick på den andra - dölja det:

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

Låt oss lägga till en egenskap i komponentklassen som kommer att styra om blocket är synligt eller inte:

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

Och nu skriver vi implementationen av våra metoder för att visa och dölja blocket:

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