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('!');
}
}
अब, यदि कोड चलाया जाता है और बटन पर क्लिक किया जाता है, तो क्लिक करते ही सूची में एक नया तत्व दिखाई देगा।
एक सरणी दी गई है। इसके तत्वों को एक लूप में प्रदर्शित करें। एक बटन बनाएं, जिस पर क्लिक करने से सरणी का अंतिम तत्व हटा दिया जाएगा।
