Рэактыўныя цыклы ў 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('!');
	}
}

Цяпер, калі запусціць код і націснуць на кнопку, то адразу пасля націску ў спісе з'явіцца новы элемент.

Дадзены масіў. Вывядзіце яго элементы ў цыкле. Зрабіце кнопку, па націску на якую з масіва будзе выдаляцца апошні элемент.