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

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

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

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

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

app/app.component.tsimport {NgFor} from "@angular/common";

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

app/app.component.ts@Component({
  .....
  imports: [....., NgFor],
  ....
})

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

app/app.component.html<ul>
  
</ul>

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

app/app.component.html<ul>
  <li *ngFor="let el of arr">
    {{ el }}
  </li>
</ul>

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}