As I tried all the other methods like passing data from
1. Parent to child component using Input() decorator(allows you to pass data via template),
2. From child to parent using output() decorator along with it you are going to need Event Emitter. In the child component you are going to emit an event and parent is going to listen it, you need to trigger event in child component through button click.
3. You can even do it with @viewchild which allows one component to be injected into another, giving the parent access to its attributes and functions.
For the beginners these above mentioned methods are little bit confusing! that made me write about this RxJs subject approach of Sharing Data between any components.
There are other methods like ngOnChanges(), It all depends on the context in which you are going to use these methods, but I found that RxJs subject was very interesting. It is the most efficient way to pass data between any components. You don’t have to worry about Event Emitter, Input() Output() Decorators.
Angular 5 Sharing Data Between Any Components Using RxJs Subject.
The approach is very simple
1. Create a function in the service which holds the data to pass it another component. It acts as a mediator It’s job is to take data from one component and give it to other component.
This function in service.ts file looks something like this.
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class DataShareService {
shareDataSubject = new Subject<any>(); //Decalring new RxJs Subject
sendDataToOtherComponent(somedata){
this.shareDataSubject.next(somedata);
}
}
As you can see in the code We declared RxJs Subject which takes data from one component and give it another component.(RxJs Subject observes the data changes in it. If any change it notices the data will be immediately subscribed in another component.)
To give data to RxJs subject:
You need to give data to RxJs subject so that it can pass it another component.
In the component from which you want to pass the data you need to do something like this.
import { DataShareService } from './datashare.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'data-pass',
templateUrl: './datapassing.component.html',
styleUrls: ['./datapassing.component.css']
})
export class DataPassingComponent {
constructor( private dataShareService: DataShareService) { }
passData(){
this.dataShareService.DataShareService("data you want to pass");
}
}
As you can see in the code all you need to is call passData function(send the data as parameter to this function mention the same in service call function as parameter). Which inturn call the service function with the data it wants to pass it.
When this function gets called RxJs holds the data in it, It’s a change in the subject it will be immediately subscribed in the receiving component.
To receive data from RxJs Subject you need to do something like this in the Receiving component.
import { DataShareService } from './datashare.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'data-receive',
templateUrl: './datareceiving.component.html',
styleUrls: ['./datareceiving.component.css']
})
export class DataReceivingComponent {
constructor( private dataShareService: DataShareService) {
this.dataShareService.shareDataSubject.subscribe(receiveddata=>{
console.log(receiveddata);
});
}
}
As you can see in the code in the receiving component we subscribed to the subject int constructor. If any changes happen in the subject it will be immediately subscribed in this component.
That’s All Happy Coding..!
We thank you all the readers.
If this was helpful please appreciate in the comments.
For other approaches please refer this link Sharing Data Between Angular Components I found it helpful
