18. Passing Data Between Parent and Child Components

1. Pass Single Data from Parent to Child Component

Parent Component (TS)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'  // Reference to the HTML file
})
export class ParentComponent {
  public parentName = 'John';  // Data to pass
}

Parent Component (HTML)

<h1>Parent Component</h1>
<app-child [name]="parentName"></app-child>  <!-- Passing single data -->

Child Component (TS)

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'  // Reference to the HTML file
})
export class ChildComponent {
  @Input() name: string;  // Receiving data
}

Child Component (HTML)

<h2>Child Component</h2>
<p>Name: {{ name }}</p>

---

2. Update Child Data from Parent Component

Parent Component (TS)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  public parentName = 'John';  // Initial data
}

Parent Component (HTML)

<h1>Parent Component</h1>
<input [(ngModel)]="parentName" />
<app-child [name]="parentName"></app-child>  <!-- Binding the updated value -->

Child Component (TS)

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Input() name: string;  // Receiving updated data
}

Child Component (HTML)

<h2>Child Component</h2>
<p>Name: {{ name }}</p>

---

3. Pass Array from Parent to Child Component

Parent Component (TS)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  public parentItems = ['Apple', 'Banana', 'Orange'];  // Array to pass
}

Parent Component (HTML)

<h1>Parent Component</h1>
<app-child [items]="parentItems"></app-child>  <!-- Passing array -->

Child Component (TS)

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Input() items: string[];  // Receiving array
}

Child Component (HTML)

<h2>Child Component</h2>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

---

4. Pass Object from Parent to Child Component

Parent Component (TS)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  public parentPerson = { name: 'John', age: 30 };  // Object to pass
}

Parent Component (HTML)

<h1>Parent Component</h1>
<app-child [person]="parentPerson"></app-child>  <!-- Passing object -->

Child Component (TS)

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Input() person: { name: string, age: number };  // Receiving object
}

Child Component (HTML)

<h2>Child Component</h2>
<p>Name: {{ person.name }}</p>
<p>Age: {{ person.age }}</p>

---

Summary:

• The Parent Component (TS) defines the data to be passed and binds it to the Child Component (TS) using the @Input() decorator.
• The Parent Component (HTML) uses property binding ([name], [items], [person]) to pass data to the child.
• The Child Component (HTML) receives and displays the data passed from the parent component.