Angular में रिएक्टिविटी

पब्लिक प्रॉपर्टीज में किसी भी बदलाव पर, टेम्पलेट रिएक्टिवली प्रतिक्रिया करेगा, यानी तुरंत बदल जाएगा। इस तरह Angular में रिएक्टिविटी काम करती है।

चलिए एक उदाहरण पर नज़र डालते हैं। मान लीजिए हमारे पास एक प्रॉपर्टी है, जिसमें टेक्स्ट है:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

आइए हमारी प्रॉपर्टी को किसी टैग में आउटपुट करें:

app/app.component.html<div>
  {{ text }}
</div>

अब एक बटन बनाते हैं, जिस पर क्लिक करने पर क्लास की एक मेथड कॉल होगी:

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

इस मेथड में हम टेक्स्ट बदल देंगे:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'hello';
  }
}

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