चाइल्ड कंपोनेंट के सेटर में डेटा पास करना Angular में

ऐसा करना संभव है कि पैरेंट कंपोनेंट से डेटा सेटर में चला जाए। आइए एक उदाहरण से देखते हैं। मान लीजिए कि हमारे पास एक सेटर और गेटर के साथ एक प्राइवेट प्रॉपर्टी है:

class UserComponent {
	private _name: string = '';
	
	set name(name: string) {
		if (name.length < 3) {
			this._name = name;
		} else {
			console.log('error');
		}
	}
	
	get age() {
		return this._userAge;
	}
}

उदाहरण के लिए, आइए उम्र के लिए एक सेटर बनाएं, जिसमें हम पास किए गए डेटा की जांच लागू करेंगे। साथ ही उपयोगकर्ता के गुणों को प्रदर्शित करने के लिए एक गेटर भी बनाएं:

class UserComponent {
	private _name: string = '';
	
	@Input()
	set name(name: string) {
		if (name.length > 3) {
			this._name = name;
		} else {
			console.log('error');
		}
	}
	
	get name() {
		return this._name;
	}
}

अब पैरेंट कंपोनेंट से डेटा को चाइल्ड कंपोनेंट में पास करते हैं:

<user-data name="john"></user-data>

और चाइल्ड कंपोनेंट में, पास किए गए नाम को स्क्रीन पर प्रदर्शित करते हैं:

<p>{{ name }}</p>

समझाएं कि प्राइवेट प्रॉपर्टी _name अंडरस्कोर सिंबल से क्यों शुरू होती है।

उत्पाद के नाम और उसकी कीमत के लिए सेटर और गेटर लागू करें, जो पैरेंट कंपोनेंट से पास किए जाएंगे।