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

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

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

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

app/user/user.component.tsclass 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;
  }
}

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

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

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

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