Angular PrimeNg singleton services ( Confirm , Message) show twice in view

i have an Angular V19.0 application , there is an issue with primeNg toast and confirm services. i have provided the services in a core module which is imported in app.module.ts

but when ever i inject and use these services , i get 2 dialogs or toasts per click. also the first click does not show the toast or confirm dialog.

and also the toast component does not work if the key property is not provided.

-----------------------HTML----------
<ng-container *ngIf="toastMessageKey | async as tKey">
<p-toast position="top-left" baseZIndex="999999" [key]="tKey" life="100000"/>
</ng-container>
------------------------TS-----------
this.toastMessageKey = this.messageService.messageObserver.pipe(
filter((x) => x !== null && x !== undefined),
map((t) => (<ToastMessageOptions>t).key ?? 'toast'),
);


without the code above , the toast message does not even show it self. and i even tried replicating my code to another project with the same structure (lazy loaded modules...etc)

it worked like a charm.

i don't know where have i done a mistake. I'm busting my head to a wall for this. it does not give me any errors or anything at all. but all i figured out was the confirm or toast observer are being triggered twice by each call.

------Layout service---
openToast(toast: ToastMessageOptions) {
this.toastService.add(toast);
}

Continue reading...