Sharing Data Between Angular Components Using Input Output Decorators.

Sharing Data Between Angular Components Using Input Output Decorators is a very important concept in Angular. People who begin with using Angular in their application end up using one or the other methods of passing data between components.

Here we are going to focus on how are we going to pass data between components using Input() Ouput() Decorators.
This concept is very useful when you want to pass data between parent and child components.

Sharing Data Between Angular Components Using Input Output Decorators.

Passing data from parent to child is a very straight forward method.

In the Parent Component Do something like this

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

@Component({
  selector: 'parent',
  template: `
    <child [sendDataToChild]="ParentData"></child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  ParentData = "Whatever the data you want to pass it to the child"
  constructor() { }
}

As you can see in the code in the parent component template we are using child component’s selector so that we can make use of all the child components properties in parent component. At the same time in the child tag as you can see we are property binding ParentData variable(which holds Parent Data) to the sendDataToChild property.

This way data is now ready to be accessed by child using property sendDataToChild.

Sharing Data Between Angular Components Using Input Output Decorators.

Receiving Data is also very simple method. All you need to do is make use of input() decorator.

In child component you need to do something like this.

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

@Component({
  selector: 'child',
  template: `
       {{sendDataToChild}}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() sendDataToChild: string;

  constructor() { }

}

As you can see in the code we used Input decorator named with same property name we used in the parent component’s template. We are displaying the same in the child component’s template.

Sharing Data Between Angular Components Using Input Output Decorators.

Sending Data from Child to Parent using output() decorator and Event Emitter

This part here is little tricky you need to emit data from child so that parent can listen to it. You need to trigger an event which can emit the data to parent via button click or something.

First in the parent component we need to create a function which receives data from child component.
You need to do something like this in the parent component to receive data from the child.

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

@Component({
  selector: 'parent',
  template: `
    Message: {{childData}}
    <app-child (dataEvent)="receiveData($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  childData:string;

  receiveData($event) {
    this.childData = $event
  }
}

As you can see in the code In the parent component we implemented the receiveData function which receives data from child whenever dataEvent change happens. We are assigning the $event data to the childData variable and displaying the same in the template using expression binding.

Sharing Data Between Angular Components Using Input Output Decorators.

Send Data from child to the Parent
In child component you need to make use of Event Emitter and Output() decorator to send data to parent. It looks something like this.

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

@Component({
  selector: 'child',
  template: `
      <button (click)="sendData()">Send Data</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  data: string = "I am some data"

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

  constructor() { }

  sendData() {
    this.dataEvent.emit(this.data)
  }
}

As you can see we have used the output() decorator with the same dataEvent property name we used in the parent component’s template.(I mean to say here is we are doing property binding here.)

In child component we are triggering an event using button click so that it can send data to the parent component. Button click event calls the function sendData, using Event Emitter it emits the data to the parent.

That’s ALL!
We thank you all for reading!
Happy Coding..!

For other approaches please refer this link Sharing Data Between Angular Components I found it helpful.

Sharing Data Between Angular Components Using Input Output Decorators.
If it was helpful please appreciate in the comments.