Wednesday, 20 February 2019

Angular 6 Data Sharing Service Subscribe not triggered

I need to set Value in One Component (Component A) and Receive the Value in another Component (Component B). Component A and Component B are not Parent and Child.

I created a Shared Service to Share data between the 2 components. I'm able to set the value from Component B, but when I Subscribe to get the value in Component A, it's not being triggered.

Here is what I have tried:

I added Service in @NgModule providers array in appmodule.ts file so that it is available for all the components in the project.

Service Code:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from '../../node_modules/rxjs';

@Injectable({
  providedIn: 'root'
})
export class SocialService {

  constructor() { }

  private valueObs: BehaviorSubject<string> = new BehaviorSubject<string>(null);

 public setValue(value: string):void {
     this.valueObs.next(value);
     this.getValue();
 }

 public getValue():Observable<string> {
     return this.valueObs;

 }

}

Component B: Setting value here

@Component({
  selector: 'app-componentb',
  templateUrl: './componentb.component.html',
  styleUrls: ['./componentb.component.scss']
})


constructor(private socialService: SocialService, private http: HttpClient) {



}

 buttonClick()
 {

    this.socialService.setValue("linked successfully");
 }

Component A: Get Value Here

@Component({
  selector: 'app-componenta',
  templateUrl: './componenta.component.html',
  styleUrls: ['./componenta.component.scss']
})


constructor(private socialService: SocialService, private http: HttpClient) {

       this.socialService.getValue().subscribe(data=>{

    console.log('Trigger from ComponentB');
    console.log(data);

});

}

Trigger in ComponentA is being called when ComponentA is loaded with data being null. But it is not getting called when buttonClick is called from ComponentB.

UPDATE:

I figured out the problem, I should have phrased my question properly. When ComponentA and ComponentB are in the same Page(URL), the code works perfectly.

How do I send data between 2 components when they are in 2 different pages(URLS).

Example: User opens URL1 (Renders ComponentA) which has a button, User clicks on the Button and is redirected to URL2 (Renders ComponentB) in a new tab which has a button, when User clicks on the button, I need to pass some data to ComponentA and close URL2. I need to retrieve the data passed in ComponentB and use it in URL1. Is it possible using Services? If not, which approach should I follow?



from Angular 6 Data Sharing Service Subscribe not triggered

No comments:

Post a Comment