Transfer data from child to parent and parent to child in Angular

1. @Input(): (for parent to child) You can use the @Input() decorator to declare a property in the child component that can accept data from the parent component. The parent component can then bind to this property using property binding in the template.

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

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
  `
})
export class ChildComponent {
  @Input() message: string;
}


<!-- parent.component.html -->
<app-child [message]="parentMessage"></app-child>

2. @Output() and EventEmitter: (for child to parent) You can use the @Output() decorator and the EventEmitter class to create an event in the child component that the parent component can listen to. The child component can emit an event with a payload, and the parent component can handle the event to receive the data.

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

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello, parent!');
  }
}

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="handleMessage($event)"></app-child>
  `
})
export class ParentComponent {
  handleMessage(message: string) {
    console.log(message);
  }
}

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="handleMessage($event)"></app-child>
  `
})
export class ParentComponent {
  handleMessage(message: string) {
    console.log(message);
  }
}

- Deepanshu Mehta

3. ViewChild: You can use the ViewChild decorator to access the child component instance in the parent component. Once you have access to the child component, you can call its methods and properties to pass data to the parent component.

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

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
  `
})
export class ChildComponent {
  message: string = "Hello, parent!";
}



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

@Component({
  selector: 'app-parent',
  template: `
    <app-child #child></app-child>
    <button (click)="getChildMessage()">Get Child Message</button>
  `
})
export class ParentComponent {
  @ViewChild('child') child: ChildComponent;

  getChildMessage() {
    console.log(this.child.message);
  }
}

In abovr example, the ViewChild decorator is used to get the instance of the ChildComponent in the parent component by using the #child template reference variable. You can use the ViewChild decorator to access the child component instance and call its properties or methods to pass data to the parent component.

It’s worth noting that ViewChild can also be used to access the native element​.