Reaktív ciklusok az Angular-ban

A reakcióképesség ciklusban is működni fog ngFor. Ez azt jelenti, hogy a tömb változásai azonnal megjelennek a képernyőn.

Próbáljuk ki a gyakorlatban. Tegyük fel, hogy van egy ilyen tömbünk:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

Jelenítsük meg a tömbünket ciklusban lista formájában:

app/app.component.html<ul>
  <li *ngFor="let elem of arr">
    {{ elem }}
  </li>
</ul>

Készítsünk egy gombot, amelyre kattintva egy osztálymetódus hívódik meg:

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

Ebben a metódusban változtassuk meg a tömbünket valahogy, például adjunk hozzá egy új elemet:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public add(): void {
    this.arr.push('!');
  }
}

Most, ha elindítjuk a kódot és megnyomjuk a gombot, akkor a megnyomás után azonnal megjelenik egy új elem a listában.