Direktiva for në Angular

Le të kemi një array:

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

Le ta përsërisim këtë array me një cikël në fajllin e template-it. Për këtë qëllim shërben direktiva *ngFor. Ajo mund të përsërisë një array dhe të shfaqë çdo element të tij në një tag të veçantë.

Fillimisht kjo direktivë duhet të importohet:

import {NgFor} from "@angular/common";

Dhe t'i shtohet seksionit të importeve në dekorator:

@Component({
	.....
	imports: [....., NgFor],
	....
})

Tani mund të përdoret. Le të shohim se si bëhet kjo. Le të kemi një listë ul:

<ul>
	
</ul>

Le të bëjmë që array-ja jonë të përsëritet në cikël dhe çdo element i saj të shfaqet në tag-et li. Kjo bëhet në mënyrën e mëposhtme:

<ul>
	<li *ngFor="let el of arr">
		{{ el }}
	</li>
</ul>

Është dhënë array-ja:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Shfaqni çdo element të këtij array-ji në një paragraf të veçantë.

Modifikoni detyrën e mëparshme në mënyrë që në paragrafë të shfaqen katrorët e elementeve të array-it tonë.