<p-toast> is not working globally.

[tayyabroy786]

Describe the bug

I have multiple modules with components. I have included the toaster in the shared module and am using it in the required modules. However, the issue I am facing is that I want to set the HTML globally in app.component.html or layout.component.html. Additionally, I want it to work in sub-components without having to add it to each sub-component's HTML file. Why do I need to add this to all 100 components?

Environment

Environment Information
Angular Version: [e.g., 16.1.0]
PrimeNG Version: [e.g., 16.0.2]
Browser(s): [e.g., Chrome, Firefox]
Operating System: [e.g., Windows 10]

Reproducer

No response

Angular version

16.1.0

PrimeNG version

16.0.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16

Browser(s)

All

Steps to reproduce the behavior

You have multiple modules, each containing components. The toaster component is included in a shared module and is being utilized in the required modules. However, you are encountering an issue where you want to globally set the HTML in either app.component.html or layout.component.html. Additionally, you desire this global setting to automatically apply to sub-components without having to add it individually to each sub-component's HTML file. This becomes particularly cumbersome when dealing with a large number of components (in your example, 100 components), and you are questioning the necessity of manually adding this code to each one.

Expected behavior

No response

[cetincakiroglu]

Hi,

Could you please share a stackblitz example so we can identify the issue?

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.

[tayyabroy786]

okay I have updated the code. I have multiple modules, so I want Toaster to inject from shareModule using the service file as you can see in example code. 01 - Toaster not showing. 02 - <p-toast></p-toast> (I want to use this only in one html no all component HTML Files) 03 - Can you please make this example working, usin share module in all module and we can only call this <p-toast></p-toast> app.component.html Thanks

…

On Fri, Jan 5, 2024 at 5:39 PM github-actions[bot] ***@***.***> wrote: We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template <https://stackblitz.com/github/primefaces/primeng-issue-template> or add details please edit this issue. This issue will be closed if no activities in 20 days. — Reply to this email directly, view it on GitHub <#14422 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHJXEPQIKOUKJXP5TFEGBVTYM7X63AVCNFSM6AAAAABA66Q7ACVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZYGYYDGMJXGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[cetincakiroglu]

You don't need to add it to 100 places, just create a shared module or import at the top level.

1- import toast module to the top level module
2- add <p-toast></p-toast> at the top level component where the router outlet located.
3- use message service to display the toast.

It should be something like that:

<p-toast></p-toast>
<router-outlet></router-outlet>

[tayyabroy786]

No, This is not working for me. Please check example code, I have set all code using shared Module. Link - https://stackblitz.com/edit/github-mv9zck

…

On Mon, Jan 8, 2024 at 11:58 AM Çetin ***@***.***> wrote: Closed #14422 <#14422> as completed. — Reply to this email directly, view it on GitHub <#14422 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHJXEPUEI7KDTUDTCVMAO2LYNOKHXAVCNFSM6AAAAABA66Q7ACVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJRGQYTGOBTGU3DAMI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[yvkevitch]

I've encountered the same problem in angular 17 (standalone app).
You simply need to provide MessageService at the application level and not at the component level.

[Fourat-Khelifi]

@yvkevitch would you please explain more.
I tried but it's still the same.

[yvkevitch]

@Fourat-Khelifi
Add a p-toast component to the root page of your app (eg in you app component)
Add the MessageService to the providers of your app.config.ts file
In the components where you want to use toasts, inject MessageService (Don't add it to the providers of these components)
This way it should work like a charm

[reidecarvalho]

There's still a problem. Capturing the error globally with ErrorHandler and calling MessageService on it, Toast does not appear, only if I click on the screen.

import { ErrorHandler, Injectable, inject } from '@angular/core';
import { AppMessageService } from './services/app-message.service';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  appMessageService = inject(AppMessageService);

  handleError(error: any): void {
    console.error('GlobalErrorHandler', error);

    this.appMessageService.error(
      `Erro processando solicitação:\n${error.message}`,
    );
  }
}

import { Injectable, inject } from '@angular/core';
import { MessageService } from 'primeng/api';

@Injectable({
  providedIn: 'root',
})
export class AppMessageService {
  private messageService = inject(MessageService);

  success(message: string): void {
    this.messageService.add({
      severity: 'success',
      summary: 'Sucesso',
      detail: message,
    });
  }

  info(message: string): void {
    this.messageService.add({
      severity: 'info',
      summary: 'Informação',
      detail: message,
    });
  }

  warn(message: string): void {
    this.messageService.add({
      severity: 'warn',
      summary: 'Atenção',
      detail: message,
    });
  }

  error(message: string): void {
    this.messageService.add({
      severity: 'error',
      summary: 'Erro',
      detail: message,
    });
  }
}

[emiliano-arango-nz]

Hi @reidecarvalho same issue here and I think it’s related to the ChangeDetectionStrategy for the toast component, which is using OnPush, so maybe a temp fix could be to force the change detection using:

constructor(private ref: ChangeDetectorRef) {} in your AppMessageService

and then:

this.ref.detectChanges(); in every method, for example:

error(message: string): void {
this.messageService.add({
severity: 'error',
summary: 'Erro',
detail: message,
});
this.ref.detectChanges();
}