How to transfer data from child to parent component in Angular 8?

In this, we will learn how to get the data from the child component to the parent component.

In angular 8, using @Output decorator and EventEmitter we can transfer the data from the child component to the parent component.

Here, takes an example like in the child component we have an input field and button. Whenever the user clicks on the button parent components get to know about the input value from the child component. Let’s see how to do that.

Prerequisites

• Knowledge on angular.

• Install node and CLI.

• Create a project.

• Create child and parent components using NPM commands.

• Define components in app.module.ts.

Steps

Here, follow the steps as below.

• Import Output and EventEmitter from ‘@angular/core’ in the child component.

• In the child component, define a value with @Output decorator and assign it with the new EventEmitter constructor.

• Create a button event in the same component.

• Now, the parent component defines a child selector and binds an event property with the same name to define @Output value in the child component.

• Add some code in parent.ts file to check the values.

Let’s make it clear at a detailed code level.

Now, Let’s create an angular project using the NPM command. Like

npm new sampleProject

Create parent component using NPM command. Like

npm g c parent

Create a child component using the NPM command. Like

npm g c child

Here, g means generate and c means component. We can also give command like

npm generate component component_name

We can create components manually in VS or any IDE. Otherwise we can use commands. When we use commands to generate components. It will create four files with the component name. One is for .ts file, second is .html file, third is. spec.ts file and finally .css file. Simplest way is using the command line. Now let’s look into the coding part.

Example

In child.component.ts file

import { Component, Output, EventEmitter } from "@angular/core";
@Component({
   selector: "app-child",
   templateUrl: "./child.component.html"
})
export class ChildComponent {
   @Output() childEvent = new EventEmitter();
   buttonClick(value: string) {
      this.childEvent.emit(value);
   }
}

In child.component.html file

<div>
   <label>Input field from the child component</label>
   <br />
   <input type="text" id="childInput" #userName />
   <button type="submit" id="childButton" (click)="buttonClick(userName.value)">
      Click
   </button>
</div>

Here, userName.value gives the value of the input field. Whenever a user clicks on the button in the Ui, the corresponding input value will be emitted by the event emitter.

In parent.component.html file

<div>
   <h1>Parent Component</h1>
   <app-child (childEvent)="addName($event)"></app-child>
   <p>Displaying names entered in child component input field</p>
   <label>Names:</label>
   <br />
   <p *ngFor="let name of names">
   <span>{{ name }}</span>
   </p>
</div>

In parent.component.ts file

import { Component } from "@angular/core";
@Component({
   selector: "app-parent",
   templateUrl: "./parent.component.html"
})
export class ParentComponent {
   names = [];
   addName(value: string) {
      this.names.push(value);
   }
}

Now, let’s import Child and Parent components in app.module.ts file. Like,

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { ChildComponent } from "./child.component";
import { ParentComponent } from "./parent.component";
@NgModule({
   declarations: [AppComponent, ChildComponent, ParentComponent],
   imports: [BrowserModule],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule {}

Here, we imported service class as providers. In @NgModule, we have four sections.

Declarations - Define imported components

Imports - Define imported modules

Providers - Define imported services

Bootstrap - Define root component to display data

Now, add parent selector in app.component.html

<h1<Main Page</h1>
<app-parent></app-parent>

Output

Whenever a user enters the value and clicks the Click button, the corresponding value will be displayed by the parent component.

Using @Output decorator and EventEmitter we can transfer the data from child to the parent component. Just remember we need to define the event property in the parent

component with the same @Output value in the child component. With that only data transfer will be possible.