Reactiviteit van voorwaarden in Angular

Reactiviteit werkt ook met voorwaarden ngIf. Dit betekent dat we een blok kunnen tonen of verbergen afhankelijk van wat er in de klasse-eigenschap staat.

Laten we het in de praktijk proberen. Stel dat we het volgende blok hebben

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

Laten we het tonen of verbergen op basis van een voorwaarde:

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

Laten we nu twee knoppen maken. Bij klik op de eerste tonen we ons blok, en bij klik op de tweede - verbergen we het:

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

Laten we aan de klasse-component een eigenschap toevoegen die regelt of het blok getoond of verborgen is:

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

En laten we nu de implementatie van onze methodes voor het tonen en verbergen van het blok schrijven:

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