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

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

Даден е масив. Изведете елементите му в цикъл. Създайте бутон, при натискане на който от масива ще бъде премахнат последният елемент.