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

Теперь, если запустить код и нажать на кнопку, то сразу после нажатия в списке появится новый элемент.