'Angular handling multiple the same subscriptions

I have an angular app with a component that has 2 modal dialogs: the first for confirming the deletion, the second for confirming cancel and I have subscriptions:

this.confirmCancelSubscription = this.interactionService.confirm$.subscribe((confirm: boolean) => {
  console.log(1);
  if (confirm) {
    //some actions
    this.modalRef2.hide();
  }
});

this.confirmDeleteSubscription = this.interactionService.confirm$.subscribe((confirm: boolean) => {
  console.log(2);
  if (confirm) {
    //some actions
    this.modalRef3.hide();
  }
});

Into interaction.service.ts:

private confirmSource = new Subject<boolean>();
confirm$ = this.confirmSource.asObservable();
confirm(confirm: boolean) {
  this.confirmSource.next(confirm);
}

But when I click Delete or Cancel on the modal dialog I see in the browser console 1 and 2.

Is there a way to separate the same subscriptions somehow? Or do I need to create a new method into interaction.service.ts for that?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source