Reaktiiviset silmukat Angularissa

Reaktiivisuus toimii myös silmukassa ngFor. Tämä tarkoittaa, että taulukon muutokset näkyvät välittömästi näytöllä.

Kokeillaan käytännössä. Oletetaan, että meillä on seuraava taulukko:

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

Esitetään taulukkomme silmukassa listana:

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

Tehdään painike, jota klikkaamalla kutsutaan luokan metodia:

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

Muutetaan taulukkoamme jotenkin tässä metodissa, esimerkiksi lisätään siihen uusi elementti:

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

Nyt, jos käynnistämme koodin ja painamme painiketta, lista päivittyy välittömästi painalluksen jälkeen.