Angularдаги реактив цикллар

Реактивлик циклда ngFor да ҳам ишлайди. Бу шунни англатадки, массив ўзгарганда, бу ўзгаришлар darhol экранда кўринади.

Келинг, амалда синаб кўрамиз. Бизда куйидаги массив бор деб фараз қилайлик:

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('!');
	}
}

Энди, агар кодни ишга тушириб, тугмани боссак, дарҳол босилгандан сўнг рўйхатда янги элемент пайдо бўлади.

Массив берилган. Унинг элементларини циклда чиқаринг. Босилганда массивдан охирги элемент ўчириладиган тугма ясангиз.