PrimeNG Toaster not showing - Angular 6

Question

I am trying to implement PrimeNG toaster but it is not showing up, not sure what I am missing. I followed the steps like this:

npm install primeng --save
npm install primeicons --save

I added to angular-cli styles the following:

"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"

In my app.module.ts I imported

ToastModule,
BrowserAnimationsModule

In providers I have MessageService from primeng/api.

Now, in my http requests service, I added this piece of code:

get(url: string, showSuccessToast?: boolean, toastMessage?: string) {
        const result = this.http.get(url)
            .pipe(map((response: Response) => {

                    if (showSuccessToast) {
                        this.messageService.add({severity: 'success', summary: 'Success!', detail: toastMessage});
                    }
                    return response;
                }),
                catchError(response => this.handleError(response))
            );

        return result;
    }

In my component service, where I make the get request, I added true for showSuccess and a string for message.

In app.component.ts I added: <p-toast></p-toast>

No errors are thrown, Toaster is just not popping up...

Answer 1

It seems your toast is being shown but it just displays before your view gets initialised. I tried recreating your code and it seems adding a setTimeout fixed the issue

   setTimeout(() => {
      this.messageService.add({
        severity: "success",
        summary: "Success Message",
        detail: "Order submitted"
      });
    }, 1000);

I hope this helps.