Реактивни цикли в 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('!');
  }
}

Сега, ако стартираме кода и натиснем бутона, веднага след натискането в списъка ще се появи нов елемент.