How to share data from child to parent component in Angular

AngularDevelopment

Angular is an incredible framework to build dynamics and impressive applications. Its structure is based on modules and components that work together and each one fulfills a function. When you are writing small components then, you have to share data between the components.

There are 5 ways to share data between components:

  • Parent to child component
  • Child to parent component
  • Sharing data between sibling components
  • Sharing data using ViewChild property
  • Sharing data between not related components

In this article, we are going to cover how to share data from child to parent component. Let’s go!

Output and Input decorators

When we create a component, we have several files that make up our component. One of them is the file with the .component.ts extension. That file, includes all the logic and functions of our component. In this file, sometimes we declare two decorators: @Input & @Output

@Input is a decorator to mark a property as an input.  @Input is used to define an input property, to achieve component property binding. 

@Output decorator is used to pass the data from child to parent component.  @Output decorator binds a property of a component, to send data from one component to the calling component.  @Output binds a property of the type of angular EventEmitter class. To transfer the data from child to parent component, we use @Output decorator.

Sharing data from child to parent

Finally, since we know some terms and we have more information about certain functions, it is time to know how to share data from our child component to our parent component.

The first aspect that we have to take into account is to import some libraries. Let’s Open the child component’ .ts file (component.ts). To use the @Output decorator we have to import, two important decorators, they are Output and EventEmitter.

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

Use in components with the @Output directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance. 

Now, create any variable with @Output decorator.

  @Output() myOutput:EventEmitter<string>= new EventEmitter();

Here in the place of string, we can pass different types of DataTypes. After that, create a variable to store and pass the message to the parent component.

  outputMessage:string="I am child component."

Here is the complete code:

import { Component, Input, Output,EventEmitter, OnInit } from '@angular/core';  
  
@Component({  
   selector: 'app-child-component',  
   templateUrl: './child-component.component.html',  
   styleUrls: ['./chil-component.component.css']  
})  
export class ChildComponent implements OnInit {  
   @Input() myinputMsg:string;  
   @Output() myOutput:EventEmitter<string>= new EventEmitter();  
   outputMessage:string="I am child component."  
   constructor() { }  
  
   ngOnInit() {  
      console.log(this.myinputMsg);  
   }  
}

Send the value of output message, to the parent component.  Then, we create a button and click on this button.  We will send the values to the parent component. Let’s open the child component Html page and create a button and click event of this button.  We then send the values.

<button (click)="sendValues"> Send Data </button>

 Now, fire the click on child-component.component.ts with the following function

sendValues(){  
   this.myOutput.emit(this.outputMessage);  
}

Now, to fetch the value we have to go to our HTML template file of the parent component “.component.html ” and use the below code.

<app-child-component[myinputMsg]="myInputMessage" (myOutput) ="GetChildData($event)"></app-child-component>

We have to declare a function to get the output value.

GetChildData(data){  
   console.log(data);  
}

In this article, we have learned how to pass data from parent to child component and vice versa, and which decorators are more responsible for doing this task, called @Input() and @Output() decorator. 

We hope it will help you. Stay tuned for more articles and solutions.

Tags: , , , , ,
Menu