Angular-তে রিঅ্যাকটিভ লুপ
রিঅ্যাকটিভিটি লুপ ngFor-তেও কাজ করবে।
এর মানে হল, অ্যারে পরিবর্তন হলে, সেই পরিবর্তনগুলি
তাত্ক্ষণিকভাবে স্ক্রীনেও প্রদর্শিত হবে।
চলুন অনুশীলনে চেষ্টা করি। আমাদের নিম্নলিখিত অ্যারে আছে ধরা যাক:
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('!');
}
}
এখন, যদি কোড রান করি এবং বাটনে ক্লিক করি, তাহলে ক্লিক করার পরপরই তালিকায় একটি নতুন এলিমেন্ট উপস্থিত হবে।
একটি অ্যারে দেওয়া আছে। লুপে এর এলিমেন্টগুলি আউটপুট করুন। একটি বাটন তৈরি করুন, যাতে ক্লিক করলে অ্যারে থেকে শেষ এলিমেন্টটি মুছে যাবে।
