Reaktivne zanke v Angular

Reaktivnost bo delovala tudi v zanki ngFor. To pomeni, da se bodo spremembe v tabeli takoj odrazile na zaslonu.

Poskusimo v praksi. Naj imamo naslednjo tabelo:

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

Izpišimo našo tabelo v zanki kot seznam:

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

Naredimo gumb, ob kliku na katerega bo poklicana metoda razreda:

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

V tej metodi bomo na nek način spremenili našo tabelo, na primer, dodali ji bomo nov element:

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

Zdaj, če zaženemo kodo in kliknemo na gumb, se bo takoj po kliku na seznamu pojavil nov element.