Appending multiple error messages in existing error toast

[Aditya Murthy]

HI All,

So I have a requirement that i need show some api response errors in a toast .So I'm using the syncfusion toasts component.

So is there a way to append all the errors into one single toast?

the api calls are async and responses come at different times. instead of showing multiple toasts for multiple errors, can we update them into existing toast ?

Attached is the screenshot.

Regards,

Aditya

Attachment: error_7f00e459.zip

[Indrajith Srinivasan]

Hi Aditya, 

 

Greetings form Syncfusion support, 

 

We have validated your reported query. You can’t update the toast content dynamically using a single toast, since the contents are only updated for the new toast on-demand. Instead you can achieve your behavior, by hiding the previous toast before showing the new error toast with updated content. We have also prepared a sample that tries to meet you requirements. 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-5vss1a?file=app.component.ts  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Aditya Murthy]

Thank you for the alternate solution.

Have applied it and works fine.

Regards,

Aditya

[Indrajith Srinivasan]

Hi Aditya,

Thanks for the update,

Please get back to us if you need any further assistance.

Regards,
Indrajith

[hussein]

hello, you can use if conditions like that!

catch (error) {

      if (!error.response) {

        toast({

          title: "Error Occured!",

          description: error.message,

          status: "error",

          duration: 5000,

          isClosable: true,

          position: "bottom",

        });

      } else {

        toast({

          title: "Error Occured!",

          description: error.response.data.message,

          status: "error",

          duration: 5000,

          isClosable: true,

          position: "bottom",

        });

      }

    }

[Revanth Krishnan]

Hi Hussein,

Now, toast have a built-in utility function to render the toast on the go, we have prepared a sample for your reference.

Code Snippet:

import { ToastUtility, Toast } from '@syncfusion/ej2-notifications';

. . .

export class AppComponent {

  public toastObj: Toast;

  public showToast(args): void {

    if (args.target.classList.contains('e-info')) {

      this.hideToast();

      this.toastObj = ToastUtility.show(

        'Please read the comments carefully',

        'Information',

        20000

      );

    } else if (args.target.classList.contains('e-success')) {

      this.hideToast();

      this.toastObj = ToastUtility.show(

        'Your message has been sent successfully',

        'Success',

        20000

      );

    } else if (args.target.classList.contains('e-warning')) {

      this.hideToast();

      this.toastObj = ToastUtility.show(

        'There was a problem with your network connection',

        'Warning',

        20000

      );

    } else if (args.target.classList.contains('e-danger')) {

      this.hideToast();

      this.toastObj = ToastUtility.show(

        'A problem has been occurred while submitting the data',

        'Error',

        20000

      );

    }

  }

  public hideToast(): void {

    if (this.toastObj != null && this.toastObj != undefined) {

      this.toastObj.hide('All');

    }

  }

}

Sample: https://stackblitz.com/edit/angular-qdruvr?file=app.component.ts,app.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/toast/toast-services/

Regards,

Revanth