कैसे Angular में Parent से Child Component में डेटा पास करें

Angular में डेटा को पैस करने का सबसे अच्छा तरीका है @Input डेकोरेटर का उपयोग करना। यहाँ हम देखेंगे कि कैसे हम अबीकलarray और ऑब्जेक्ट्स को पास कर सकते हैं।

स्टेप 1: Parent Component में डेटा भेजने के लिए @Input डेकोरेटर का उपयोग करें

Parent Component में, डेटा को चाइल्ड में पास करने के लिए @Input डेकोरेटर का उपयोग करें।

स्टेप 2: Child Component में प्राप्त करें डेटा

Child Component में, @Input डेकोरेटर का उपयोग करें और पैरेंट से डेटा प्राप्त करें।

उदाहरण:

    
    // parent.component.ts
    import { Component } from '@angular/core';

    @Component({
      selector: 'app-parent',
      template: `
        <app-child [data]="'Hello, World'">
      `
    })
    export class ParentComponent {}

    // child.component.ts
    import { Component, Input } from '@angular/core';

    @Component({
      selector: 'app-child',
      template: `
        <p>{{ data }}

      `
    })
    export class ChildComponent {
      @Input() data: any;
    }
    
    

ऊपर के उदाहरण में, Parent Component में ‘Hello, World’ डेटा को Child Component में पास किया गया है और Child Component में वह डेटा प्रिंट किया गया है।

इस तरह से, आप Angular में Parent से Child Component में डेटा पास कर सकते हैं।