Angular 6 Data Sharing Service Subscribe not triggered

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 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=&gt;{

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?

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

TypeScript, Angular, Firebase & Angular Material Master class Tutorial

As the course progresses, you'll get familiar with: TypeScript, Angular Application Architecture, and Angular CLI. Angular Modules and Angular Components. Angular's Component LifeCycle Hooks....

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript. This tutorial gets you off the ground with Angular. We are going to use the official CLI (command line) tool to generate boilerplate code.

Angular: Novidades Angular v9 Ivy: TypeScript 3.7

Mais um vídeo da série sobre Angular v9 e Angular Ivy! Esse tutorial é uma dica rápida mostrando as duas maiores novidades to TypeScript 3.7 que é o operador de optional chaining e o operador de coalescência nula.