In this article we will be discussing about sharing a data between non related components. Here I have used angular BehaviorSubject. We have used $rootScope in Angular js 1 as a global variable. However there is no such concept in Angular 2 (+), still we can achieve the same using below concept. Let us check with one example. Here I am going to create a simple service file. Check the code below.
Service file
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class commonService {
private data = new BehaviorSubject('');
currentData = this.data.asObservable()
constructor() { }
updateMessage(item: any) {
this.data.next(item);
}
}
Here we have created a new BehaviorSubject and assigned to currentData. We will be subscribing the currentData in component. Now let us check our components.
First components
import { Component } from '@angular/core';
import { commonService } from '../../services/commonService';
@Component({
selector: 'sub-component-one',
template: '<div>'
+ '<h3>Sub Component one</h3>'
+ '<input type="text" [(ngModel)]="queryTerm">'
+ '<button class="btn" (click)="shareData(queryTerm)">Trigger</button>'
+ '</div>'
})
export class SubComponentOne {
queryTerm: any;
currentValue: any;
constructor(private _data: commonService) { }
shareData() {
this.currentValue = this.queryTerm;
this._data.updateMessage(this.currentValue);
}
}
Here I have added a text box and also a button to click. On click on Trigger button user entered value should display in the second component. Clicking on shareData method we are updating the method in the service. Now let us check second component.
Second component
import { Component, OnInit } from '@angular/core';
import { commonService } from '../../services/commonService';
@Component({
selector: 'sub-component-two',
template: '<div>'
+ '<h3>Sub Component two</h3>'
+ '<p>Current Value : {{currentValue}}</p>'
+ '</div>'
})
export class SubComponentTwo {
currentValue: any;
constructor(private _data: commonService) { }
ngOnInit() {
this._data.currentData.subscribe(currentData => this.currentValue = currentData)
}
}
Here we are subscribing the data in ngOnInit. So whenever the user clicks on the trigger method in the first component, that will be get updated in the second component ngOnInit.
We are done.
There are many other ways also there to share data between components, for that read here - 7 method to share the data between components.
Related Info
1. File/image upload and send data to backend - Angular
2. Show preview image while uploading - Angular
thanks, this is brilliant
ReplyDeleteHi
ReplyDeleteIn the template of SubComponentOne the button calls to shareData(queryTerm) sending a parameter but the method does nor accepts any parameter no?
Thanks
Hi
ReplyDeleteHere the code working: https://stackblitz.com/edit/sharedata?file=src/app/sub-component-one.component.html
Thanks
Not working
ReplyDeleteIt is not working for me, I know it's stupid, but it's not working for me.
ReplyDeleteIt is rather very good, nevertheless glance at the data with this handle. Black satta king
ReplyDelete