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

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

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

export class AppComponent {
	public text: string = '';
}

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

<div>
	{{ text }}
</div>

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

<button (click)="show()">
	show
</button>

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

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

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

एक डिव और दो बटन बनाएं। ऐसा करें कि पहले बटन पर क्लिक करने से डिव में एक टेक्स्ट दिखे, और दूसरे बटन पर क्लिक करने से - दूसरा टेक्स्ट दिखे।