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);
  }

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);
  }

• angular
• primeng
• toast
• confirm

• did you add <p-toast /> tag in parent of this component? i mean maybe you added this tag twice – Mojtaba Nejad Poor Esmaeili Commented Jan 30 at 0:38
• @MojtabaNejadPoorEsmaeili unfortunatly , there is only one p-taost tag in app component. – Pouya Babaie Commented Jan 31 at 14:58

1 Answer 1

The problem could be due to SSR being on, it open once on the server and once on the browser, the solution is to wrap the logic in a defer block so that executes only on the browser.

@defer() {
  <ng-container *ngIf="toastMessageKey | async as tKey">
    <p-toast position="top-left" baseZIndex="999999" [key]="tKey" life="100000"/>
  </ng-container>
}