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

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

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

← →
↑