Реактивни циклуси во 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()">
	додади
</button>

Во овој метод на некој начин ќе ја промениме нашата низа, на пример, ќе додадеме нов елемент во неа:

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

Сега, ако се стартура кодот и се притисне на копчето, веднаш по притискањето во листата ќе се појави нов елемент.

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