Реактивни циклуси у Angular-у

Реактивност ће такође радити у циклусу ngFor. То значи да ће се промене у низу одмах приказати на екрану.

Хајде да испробамо у пракси. Претпоставимо да имамо следећи низ:

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

Прикажимо наш низ у циклусу као списак:

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

Направимо дугме на које ће се кликом позивати метода класе:

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

У овој методи ћемо некако изменити наш низ, на пример, додаћемо нови елемент у њега:

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

Сада, ако покренемо код и кликнемо на дугме, нови елемент ће се одмах појавити у списку након клика.