A feltételek reaktivitása az Angular-ban

A reaktivitás a ngIf feltétellel is működni fog. Ez azt jelenti, hogy egy blokkot megjeleníthetünk vagy elrejthetünk attól függően, hogy mit tartalmaz az osztály egy tulajdonsága.

Próbáljuk ki gyakorlatban. Tegyük fel, hogy van a következő blokkunk

app/app.component.html<div>
  szöveg
</div>

Jelenítsük meg vagy rejtsük el feltétel alapján:

app/app.component.html<div *ngIf="isShow">
  szöveg
</div>

Készítsünk most két gombot. Az elsőre kattintva jelentsük meg a blokkot, a másodikra kattintva pedig rejtsük el:

app/app.component.html<button (click)="show()">
  megjelenít
</button>
<button (click)="hide()">
  elrejt
</button>

Adjunk hozzá az osztályhoz egy tulajdonságot, ami szabályozza, hogy a blokk látható-e vagy sem:

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

És most írjuk meg a blokk megjelenítéséhez és elrejtéséhez szükséges metódusaink implementációját:

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