Toast not displaying after making an api call

UI Components for Angular
Post Reply
foolball
Posts: 7
Joined: 14 Aug 2018, 01:41

28 Aug 2018, 19:34

I have a button that calls a service. this service saves data to DB. It returns a boolean. When subscribing to the api, if response returns true, I call
this.messageService.add({severity: "success", summary: "Success Message", detail: "Order submitted"});

The issue i'm having is the toast message does not show UNTIL I do a separate click on the page.

Steps to repro
1.Click save button
2. Data is saved and returns true
3. runs the code this.messageService.add({severity: "success", summary: "Success Message", detail: "Order submitted"});

expected result
1. toast message shows

actual result
1. toast does not show UNTIL i click on the page (anywhere on the page).

Is this expected?
Thanks in advance.

foolball
Posts: 7
Joined: 14 Aug 2018, 01:41

30 Aug 2018, 03:54

This was resolved.
I needed to add changeDetectionStrategy.OnPush.

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4345
Joined: 16 Oct 2011, 19:19
Location: Singapore

03 Sep 2018, 15:16

By the way, how are you importing the toast module. Are you able to import it as import ToastModule from 'primeng/toast'
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

foolball
Posts: 7
Joined: 14 Aug 2018, 01:41

18 Sep 2018, 21:13

yes

johnhoang
Posts: 13
Joined: 12 Apr 2017, 22:39

21 Jan 2019, 17:08

I am having the same problem with Toast using Primeng v7.0.x, Angular 7.2.1. Toast still does not show up after the first api call or require clicking on the UI to display for the first api call. Change to "changeDetection: ChangeDetectionStrategy.OnPush" on the compoment does not make any different. Please see my updated post below.
Last edited by johnhoang on 21 Jan 2019, 18:17, edited 2 times in total.

johnhoang
Posts: 13
Joined: 12 Apr 2017, 22:39

21 Jan 2019, 18:09

It only works after the first API call if I use Angular NgZone like this:

Code: Select all

import { NgZone } from '@angular/core';
constructor(private ngZone: NgZone, private msgSvc: AppMessageService)

then

this.API.call()
      .subscribe(
        res => {
          if (res["error"]) {
            this.ngZone.run(() => {
              this.msgSvc.addFailedMsg("Some error message");
            });
            return;
          }
      });
      

@Injectable({ providedIn: 'root' })
export class AppMessageService {

  constructor(
    private readonly msgSvc: MessageService,
    private readonly authSvc: AuthService
  ) { }

  addSuccessMsg(msg, clearPrevious: boolean = false) {
    return this.addMsg(MsgType.Success, msg, clearPrevious);
  }

  addFailedMsg(msg, clearPrevious: boolean = false) {
    return this.addMsg(MsgType.Error, msg, clearPrevious);
  }

  addMsg(type, msg, clearPrevious = false) {
    if (clearPrevious)
      this.clear();
    if (!this.authSvc.loggedIn) return;
    this.msgSvc.add({ severity: type, summary: type.charAt(0).toUpperCase() + type.slice(1), detail: msg });
  }

  clear() {
    this.msgSvc.clear();
  }
}
 
Is this a known issue of PrimeNg Toast component? Does anyone know why?

Rvdabeele
Posts: 8
Joined: 28 Aug 2017, 11:05

21 Jan 2019, 18:49

It's not the toast's responsibility to run inside the zone - that's yours.
So yes, your method of using zone.run() is correct.

tamfab
Posts: 2
Joined: 29 Mar 2020, 13:25

24 Jun 2020, 00:46

Hello

I have the same problem. I call my service message in a subscribe and at the first click the toast does not appear (however the value of the subscribe I see it in console.log ()) and it is on the second click that the toast is displayed with the value of the subscribe.
I do not see where the problem comes from and how to solve it ....

I tried to change the detection strategy to 'onPush' or put the ngZone, but neither works for me ...

Does anyone have an idea? please

here is my code

Code: Select all

 this.sub = this.donnFacade.getError().subscribe(value => {
        if (value !== null) {
         console.log('value getError ==>', value);
          this.message = {
            key: 'erreurServerForm',
            severity: 'error',
            summary: 'Erreur serveur - Création interrompue',
            detail: `${value.status}`,
            sticky: true
          };
          this.messageService.add(this.message);
        }
      });

varshith123
Posts: 1
Joined: 25 Jul 2020, 10:08

25 Jul 2020, 10:11

I am having a similar issue with Toast utilizing Primeng v7.0.x, Angular 7.2.1. Toast despite everything doesn't appear after the main API call or require tapping on the UI to show for the principal API call. Change to "change-identification: ChangeDetectionStrategy.OnPush" on the segment doesn't have any effect. If you don't mind seeing my refreshed post beneath.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests