Reaktiivsed tsüklid Angularis

Reaktiivsus töötab ka tsüklis ngFor. See tähendab, et massiivi muutuste korral kajastuvad need muutused kohe ekraanil.

Proovime seda praktikas. Olgu meil järgmine massiiv:

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

Kuvame oma massiivi tsüklina loendina:

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

Loome nupu, millel klikkides kutsutakse klassi meetod:

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

Selles meetodis muudame oma massiivi mingil moel, näiteks lisame sellele uue elemendi:

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

Nüüd, kui käivitada kood ja vajutada nuppu, ilmub peale vajutamist kohe loendisse uus element.