Реактивные циклы в Angular

Реактивность также будет работать в цикле ngFor. Это значит, что при изменениях массива, эти изменения сразу отобразятся на экране.

Давайте попробуем на практике. Пусть у нас есть следующий массив:

export class AppComponent { public arr: string[] = ['a', 'b', 'c', 'd']; }

Выведем наш массив в цикле в виде списка:

<ul> <li *ngFor="let elem of arr"> {{ elem }} </li> </ul>

Сделаем кнопку, по клику на которую будет вызываться метод класса:

<button (click)="add()"> add </button>

В этом методе как-то изменим наш массив, например, добавим в него новый элемент:

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

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

Дан массив. Выведите его элементы в цикле. Сделайте кнопку, по нажатию на которую из массива будет удаляться последний элемент.