Angular-তে রিঅ্যাকটিভ লুপ

রিঅ্যাকটিভিটি লুপ ngFor-তেও কাজ করবে। এর মানে হল, অ্যারে পরিবর্তন হলে, সেই পরিবর্তনগুলি তাত্ক্ষণিকভাবে স্ক্রীনেও প্রদর্শিত হবে।

চলুন অনুশীলনে চেষ্টা করি। আমাদের নিম্নলিখিত অ্যারে আছে ধরা যাক:

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

আসুন আমাদের অ্যারেটি একটি তালিকা আকারে লুপে আউটপুট করি:

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

চলুন একটি বাটন তৈরি করি, যাতে ক্লিক করলে ক্লাসের একটি মেথড কল হবে:

app/app.component.html<button (click)="add()">
  add
</button>

এই মেথডে আমাদের অ্যারেটি কিছুভাবে পরিবর্তন করি, উদাহরণস্বরূপ, এতে একটি নতুন এলিমেন্ট যোগ করি:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public add(): void {
    this.arr.push('!');
  }
}

এখন, যদি কোড রান করি এবং বাটনে ক্লিক করি, তাহলে ক্লিক করার পরপরই তালিকায় একটি নতুন এলিমেন্ট উপস্থিত হবে।