Not getting data from one component to another

Question

I am collecting data from a dialog component and on the closing of which I am redirecting the user to the /payments component and passing that particular data to this component. I am using a service to pass the data but it is not getting subscribed.

Dialog component (where I am passing the data):

 dialogRef.afterClosed().subscribe(confirm => {
      if (confirm) {
        this.dialogRef.close();
        let navigationUrl = "unit-details/payments"; 
        this.router.navigate([navigationUrl], { queryParams: { tid: this.customerTransactionInfo.customerTransactionId } }); // redirecting to the payments component.
                this.sharedService.communicateDueDatetoPayments(this.dueDateUpdatedTransctions); //Passing the data.
      }
    });

Payments component (where I am expecting the data):

ngOnInit(){
this.listenDueDateRes();
}

  listenDueDateRes() {
    this.dueDateSubscription = this.sharedService.sendDueDatetoPayments.subscribe((res: any) => {
console.log(res); // not getting response
      if (res) {
        this.dueDateTransactionList = res;
      }
    });
  }

ngOnDestroy(){
this.dueDateSubscription.unsubscribe();
}

Service:

sendDueDatetoPayments = new Subject();

  communicateDueDatetoPayments(msg) {
    this.sendDueDatetoPayments.next(msg);
  }

Answer 1

you have defined the method communicateRentDueDate() in the dialog component, but in your service file, you have defined communicateDueDatetoPayments(). Make sure that the method names are consistent across your components and service file.

Additionally, make sure that you are calling the listenDueDateRes() method in the ngOnInit() method or some other lifecycle hook of the PaymentsComponent. This will ensure that the subscription is set up before any data is emitted from the service.

this.dueDateSubscription = this.sharedService.sendDueDatetoPayments.subscribe((res: any) => {
    console.log(res);
    if (res) {
      this.dueDateTransactionList = res;
    }
  });

make sure that the SharedService is provided at the module level or at a higher level than the DialogComponent and PaymentsComponent, so that both components are using the same instance of the service.

**Another Way**

you can modify the shared service to store the data and emit it as soon as the subscription is set up in the Payments component. Here's how you can modify the service:

private dueDateUpdatedTransactions: any; // Store the data

sendDueDatetoPayments = new BehaviorSubject<any>(null); // Use BehaviorSubject to emit the latest value immediately upon subscription

communicateDueDatetoPayments(msg) {
  this.dueDateUpdatedTransactions = msg; // Store the data
  this.sendDueDatetoPayments.next(msg); // Emit the data
}

getDueDateUpdatedTransactions() {
  return this.dueDateUpdatedTransactions;
}

Payments component

ngOnInit(){
  this.listenDueDateRes();
  const dueDateUpdatedTransactions = this.sharedService.getDueDateUpdatedTransactions(); // Get the latest value
  if (dueDateUpdatedTransactions) {
    this.dueDateTransactionList = dueDateUpdatedTransactions;
  }
}

listenDueDateRes() {
  this.dueDateSubscription = this.sharedService.sendDueDatetoPayments.subscribe((res: any) => {
    console.log(res);
    if (res) {
      this.dueDateTransactionList = res;
    }
  });
}

ngOnDestroy(){
  this.dueDateSubscription.unsubscribe();
}