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('!');
  }
}

अब, यदि कोड चलाया जाता है और बटन पर क्लिक किया जाता है, तो क्लिक करते ही सूची में एक नया तत्व दिखाई देगा।