Reaktywne pętle w Angular

Reaktywność będzie również działać w pętli ngFor. Oznacza to, że przy zmianach tablicy, zmiany te natychmiast pojawią się na ekranie.

Spróbujmy w praktyce. Załóżmy, że mamy następującą tablicę:

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

Wyświetlmy naszą tablicę w pętli w postaci listy:

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

Stwórzmy przycisk, po kliknięciu którego będzie wywoływana metoda klasy:

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

W tej metodzie w jakiś sposób zmodyfikujmy naszą tablicę, na przykład, dodajmy do niej nowy element:

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

Teraz, jeśli uruchomimy kod i naciśniemy przycisk, to natychmiast po naciśnięciu na liście pojawi się nowy element.