Question

How to pass data from a child component to a parent component in Angular 4?

"I'm working on an Angular 4 project, and I need to figure out how to pass data from a child component back to its parent component. I've tried using various approaches, but I'm not sure what the correct way is. I know that in Angular, the parent component can send data to the child using input bindings, but I'm struggling with how to send data from the child back to the parent. Can anyone explain how I can achieve this in Angular 4?

Answer 1

In Angular 4, passing data from a child component to a parent component is done using EventEmitter and @Output. Here's the precise and complete process to achieve this:

1. Child Component:

• The child component emits the data using the EventEmitter and @Output() decorator.

Child Component Code:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({

  selector: 'app-child',

  template: `

    <button (click)="sendData()">Send Data to Parent</button>

  `

})

export class ChildComponent {

  @Output() dataEmitter = new EventEmitter<string>();

  sendData() {

    const data = 'Hello from Child!';

    this.dataEmitter.emit(data);  // Emit data to parent

  }

}

In the above child component:

• @Output() decorator marks dataEmitter as an event emitter that the parent component can listen to.

• The sendData() method emits data when the button is clicked.

2. Parent Component:

• The parent component listens to the event emitted by the child component using the event binding () syntax.

Parent Component Code:

import { Component } from '@angular/core';

@Component({

  selector: 'app-parent',

  template: `

    <app-child (dataEmitter)="receiveData($event)"></app-child>

    <p>Data received from Child: {{ childData }}</p>

  `

})

export class ParentComponent {

  childData: string;

  receiveData(data: string) {

    this.childData = data;  // Receive data from the child and store it

  }

}

In the above parent component:

• The parent listens for the dataEmitter event from the child by using the (dataEmitter) syntax.

• The receiveData() method receives the data from the child and updates the childData property.