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

Сада, ако покренемо код и кликнемо на дугме, нови елемент ће се одмах појавити у списку након клика.

Дат је низ. Прикажите његове елементе у циклусу. Направите дугме притиском на које ће се из низа уклањати последњи елемент.