24 | How To Pass Data From Child To Parent Component In Angular | Component Interaction (Hindi/Urdu)
एंगुलर में डाटा को चाइल्ड से पैरेंट कंपोनेंट में पास करने के तरीके को समझने के लिए हमें कुछ बेहद महत्वपूर्ण चीजें जाननी चाहिए। यहां हम इसे हिंदी या उर्दू में समझेंगे।
यहां हम एंगुलर में कंपोनेंट इंटरेक्शन की बात कर रहे हैं, जिसमें हम जानेंगे कि कैसे हम अपने चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट में डाटा पास कर सकते हैं।
एंगुलर में कंपोनेंट इंटरेक्शन के लिए हमें @Input और @Output डेकोरेटर्स का इस्तेमाल करना होता है। चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट में डाटा पास करने के लिए हम @Output डेकोरेटर का इस्तेमाल करते हैं।
एंगुलर में कंपोनेंट इंटरेक्शन का उदाहरण देखने के लिए हमें एक सिम्पल कंपोनेंट बनाना होगा जिसमे हम एक बटन क्लिक करेंगें और उसके बाद कंपोनेंट इंटरेक्शन के जरिए डाटा पास करेंगें।
उदाहरण:
// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Output() dataToEmit = new EventEmitter();
emitData(data: string) {
this.dataToEmit.emit(data);
}
}
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
receiveData(data: string) {
console.log(data);
}
}
समाप्ति
इस आर्टिकल में हमने देखा कि कैसे हम एंगुलर में चाइल्ड से पैरेंट कंपोनेंट में डाटा पास कर सकते हैं। यह प्रोसेस अत्यंत उपयोगी होती है जब हमें कंपोनेंट इंटरेक्शन की आवश्यकता होती है। यहा समझाने के लिए हिंदी या उर्दू में समझने से अधिक बेहतर होता है।
👍
sir, please make lecture on react
👍👍👍
Grt lecture..sir ❤❤👍👍😊😊
Aslam -o-Alikum.
React.js playlist not been added.