BehaviourSubject subscribe not getting triggered for componets on different routes

Question

I am developing a project where i have to use subject to transfer data between components so i wrote a service and there are two components imagescust and imagesipa i am passing data from imagesipa component and subscribing it on imagescust component. This above mentioned components are two different routes. I am able to push data to service but i am not able to subscribe the same on other component i.e imagescust. initially when init method gets called i am getting console of initial value but then after subscription is not working pls help me, following is the code snipet

Service

    import { Injectable } from "@angular/core";
    import { BehaviorSubject, Observable, Subject } from "rxjs";
    
    @Injectable({ providedIn: "root" })
    export class OcrmessageService {
      private subject = new BehaviorSubject<any>("Initial");
      message$ = this.subject.asObservable();
    
      constructor() {}
    
      sendMessage(message: string) {
        this.subject.next(message);
        console.log(message);
      }
    
      clearMessages() {
        this.subject.next("Initial");
      }
    
      
    }

ImagesIPA Component

    import { OcrmessageService } from '../ocrmessage.service';
    import { Component, OnInit } from "@angular/core";
    import { HttpService } from "../../services/http/http.service";
    
    @Component({
      selector: "app-imagesipa",
      templateUrl: "./imagesipa.component.html",
      styleUrls: ["./imagesipa.component.css"],
    })
    export class ImagesipaComponent implements OnInit {
      bln_Loading: boolean;
      sarr_imageData: any;
    
      constructor(public httpService: HttpService,public ocrmessage : OcrmessageService) {
      }
    
      ngOnInit() {
        this.bln_Loading = true;
        this.getImageData();
      }
    
      getImageData() {
        this.httpService
          .getMethod("meterread/getImageData")
          .subscribe((res: any) => {
            console.log(res);
            this.sarr_imageData = res;
            this.bln_Loading = false;
          });
      }
    
      updateData(ocr, meter, imageName) {
        const objSave = {
          ocrReading: ocr.value,
          ocrMeterNo: meter.value,
          imageName: imageName,
        };
    
        this.httpService
          .postMethod("meterread/saveReadingInfo", objSave)
          .subscribe((res: any) => {
            console.log(res);
            this.getImageData();
            this.ocrmessage.sendMessage("OCR DONE");
          });
      }
    }

ImagesCust Component

import { ExcelServicesService } from "./../../services/excel-export/excel-services.service";
import { OcrmessageService } from "../ocrmessage.service";
import { HttpService } from "./../../services/http/http.service";
import { Component, OnInit, ViewChild } from "@angular/core";
import { DataTableDirective } from "angular-datatables";
import { Subject } from "rxjs";
import { Moment } from "moment";

@Component({
  selector: "app-imagescust",
  templateUrl: "./imagescust.component.html",
  styleUrls: ["./imagescust.component.css"],
})
export class ImagescustComponent implements OnInit {
  bln_Loading: boolean;
  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  sarr_tableData: any;

  constructor(
    public httpService: HttpService,
    private ocrService: OcrmessageService,
    private excelService: ExcelServicesService
  ) {
    // console.log("SUBJECT");
  }

  ngOnInit() {
    this.ocrService.message$.subscribe((message) => {
      console.log("New Message", message);
      this.getData();
    });
    this.getData();
  }
rerender(): void {
    if (this.dtElement.dtInstance === undefined) {
      this.dtTrigger.next();
    } else {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first
        dtInstance.destroy();
        this.dtTrigger.next();
      });
    }
  }
}

Stackblitz link of the same demo is https://angular-router-with-communication.stackblitz.io

Answer 1

In your service, write a new method like this:

private subject = new BehaviorSubject<any>("Initial");

public getSubjectSource() {
    return this.subject.asObservable();
}

In your component :

ngOnInit() {
    this.ocrService.getSubjectSource().subscribe((message) => {
      console.log("New Message", message);
      this.getData();
    });
    this.getData();
}