Reaktívne cykly v Angular

Reaktivita bude fungovať aj v cykle ngFor. To znamená, že pri zmenách pola sa tieto zmeny okamžite prejavia na obrazovke.

Vyskúšajme si to v praxi. Nech máme nasledujúce pole:

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

Vypíšme naše pole v cykle vo forme zoznamu:

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

Vytvorme tlačidlo, po kliknutí na ktoré bude volaná metóda triedy:

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

V tejto metóde nejako zmeňme naše pole, napríklad, pridajme do neho nový prvok:

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

Teraz, ak spustíme kód a stlačíme tlačidlo, tak ihneď po stlačení v zozname sa objaví nový prvok.