Sharing The Data Between Components In Angular

Sharing The Data Between Components In Angular

1. Using @Input decorator (Parent to Child)

When you declare a variable with the Input decorator in the child component, it allows that variable to be received from a parent component. In this case, we define a message variable in the parent, then use square brackets to pass the data to the child. Now the child can display this data in its own components.

=====================

parent.component.ts

=====================

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

@Component({

selector: 'app-component',

templateUrl: "<app-child [data]='data'></app-child>",

})

export class ParentComponent implements OnInit {

constructor() { }

data:string="this Data was passed from parent component to child component";

ngOnInit():void {

}

}

=========================

child.component.ts

=========================

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

@Component({

selector: 'app-child',

templateUrl: '<p>{{data}}<p>',

})

export class ChildComponent implements OnInit {

@input() data:string = "this is default data";

constructor() { }

ngOnInit():void {

}

}

======================================================================================================

2. Using @Output decorator and EventEmiiter (Parent to Child)

In the child, we declare a message event variable with the Output decorator and set it equal to a new event emitter. Then we create a function named sendMessage that calls emit on this event with the message we want to send. Lastly, we create a button to trigger this function.

In the parent, we create a function to receive the message and set it equal to the message variable.

The parent can now subscribe to this message event that's outputted by the child component, then run the receive message function whenever this event occurs.

====================

child.component.ts

====================

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

@Component({

selector: 'app-child',

templateUrl: "<button (click)='sendData()'>send Data<button>",

})

export class ChildComponent {

@output() dataEvent = new EventEmitter();

data:string ="Data passing child to parent component"

constructor() { }

sendData(){

this.dataEvent.emit(this.data);

}

ngOnInit():void {}

}

=======================

parent.compponent.ts

=======================

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

@Component({

selector: 'app-parent',

templateUrl: "{{data}}<br/> <app-child (dataEvent='receivedData($event)'></app-child>",

})

export class ParentComponent implements OnInit {

data:string=""

constructor() { }

ngOnInit():void {

}

receivedData(data:string){

this.data = data;

}