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

पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में डेटा पास किया जा सकता है। यह डेटा चाइल्ड क्लास के प्रॉपर्टीज़ में जाएगा। आइए देखें कि यह कैसे किया जाता है।

शुरुआत में हम चाइल्ड कंपोनेंट की क्लास में वे प्रॉपर्टीज़ बनाएंगे, जिनमें पैरेंट कंपोनेंट से डेटा इम्पोर्ट किया जाएगा:

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

अब हमें यह घोषित करना होगा कि इन प्रॉपर्टीज़ में बाहर से डेटा आएगा। इसके लिए एक विशेष डेकोरेटर Input का उपयोग किया जाता है। इसे हम अपने चाइल्ड कंपोनेंट में इम्पोर्ट करें:

app/user/user.component.tsimport { Input } from '@angular/core';

और अब इस डेकोरेटर को हमारी प्रॉपर्टीज़ के लिए अप्लाई करें:

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

चाइल्ड कंपोनेंट की टेम्पलेट फाइल में डेटा का आउटपुट जोड़ें:

app/user/user.component.html<p>{{ name }}</p>
<p>{{ age }}</p>

और अब पैरेंट की टेम्पलेट में चाइल्ड कंपोनेंट के टैग को कॉल करते समय एट्रिब्यूट्स लिखें, जिनके नाम हमारी चाइल्ड क्लास की प्रॉपर्टीज़ के नाम से मेल खाएंगे। इन एट्रिब्यूट्स के वैल्यू चाइल्ड क्लास की प्रॉपर्टीज़ में जाएंगे:

app/app.component.html<user-data name="john" age="25"></user-data>