Angular-এ for ডাইরেক্টিভ

ধরুন আমাদের একটি অ্যারে আছে:

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

আসুন টেমপ্লেট ফাইলে একটি লুপ দিয়ে এই অ্যারেটি পুনরাবৃত্তি করি। এর জন্য রয়েছে ডাইরেক্টিভ *ngFor। এটি একটি অ্যারে পুনরাবৃত্তি করতে পারে এবং এর প্রতিটি উপাদান আলাদা ট্যাগে আউটপুট করতে পারে।

প্রথমে এই ডাইরেক্টিভটি ইম্পোর্ট করতে হবে:

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

এবং ডেকোরেটরের ইম্পোর্ট বিভাগে এটি যোগ করুন:

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

এখন এটি ব্যবহার করা যাবে। আসুন দেখি এটি কীভাবে করা হয়। ধরুন আমাদের একটি ul তালিকা আছে:

<ul>
	
</ul>

আসুন আমাদের অ্যারেটি একটি লুপে পুনরাবৃত্তি করা যাক এবং এর প্রতিটি উপাদান li ট্যাগে আউটপুট হোক। এটি নিম্নলিখিতভাবে করা হয়:

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

একটি অ্যারে দেওয়া হয়েছে:

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

এই অ্যারের প্রতিটি উপাদান আলাদা অনুচ্ছেদে আউটপুট করুন।

পূর্ববর্তী কাজটি পরিবর্তন করুন যাতে অনুচ্ছেদে আমাদের অ্যারের উপাদানগুলির বর্গ আউটপুট হয়।