Angular में पैरेंट कंपोनेंट में डेटा ट्रांसफर

चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट में डेटा ट्रांसफर किया जा सकता है। यह विशेष ऑब्जेक्ट EventEmitter और मेथड emit की सहायता से इवेंट्स एमिट करके किया जाता है। चाइल्ड कंपोनेंट इवेंट्स एमिट करेगा, इवेंट के साथ कुछ डेटा पास करेगा, और पैरेंट कंपोनेंट इवेंट्स को कैच करेगा, पैरेंट कंपोनेंट से डेटा प्राप्त करेगा।

आइए प्रैक्टिस में ट्राई करते हैं। इसके लिए हमें कुछ स्टेप्स फॉलो करने होंगे। शुरुआत में हमारे चाइल्ड कंपोनेंट में डेकोरेटर @Output और क्लास EventEmitter इम्पोर्ट करेंगे:

app/user/user.component.tsimport { Component, Output, EventEmitter } from '@angular/core';

अब चाइल्ड क्लास में प्रॉपर्टी onData बनाएंगे, जिसकी वैल्यू नया ऑब्जेक्ट EventEmitter होगी, जिसमें स्ट्रिंग होगी:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
}

अब मेथड send बनाएंगे, जिसका कॉल इवेंट onData को दिए गए टेक्स्ट के साथ पैरेंट कंपोनेंट में एमिट करेगा:

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
  
  send() {
    this.onData.emit('xxx');
  }
}

चाइल्ड कंपोनेंट के टेम्पलेट में बटन बनाएंगे, जिसके क्लिक पर मेथड send कॉल होगा:

app/user/user.component.html<button (click)="send()">
  send data
</button>

पैरेंट कंपोनेंट में मेथड onData बनाएंगे, जो ऑटोमैटिकली कॉल होगा जब चाइल्ड कंपोनेंट से संबंधित इवेंट एमिट होगा। मेथड के पैरामीटर में ट्रांसफर किया गया डेटा प्राप्त होगा:

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

पैरेंट कंपोनेंट के टेम्पलेट में चाइल्ड कंपोनेंट के टैग से इवेंट बाइंड करेंगे:

app/app.component.html<app-user (onData)="onData($event)"></app-user>