ToastUtility.show does not respect type parameter if content parameter is set

[Michael Mairegger]

Hi, I found out that toast ToastUtility.show does not respect type parameter if content parameter is not string

Steps to reproduce:

ToastUtility.show('This works correct', 'Success', 20000);
ToastUtility.show({content: 'Success bg-color is not showing'}, 'Success', 20000);

As you can see both toasts show different background colors.

Workaround

ToastUtility.show({content: 'Workaround: This works correct', cssClass: 'e-toast-success'}, 'Error', 20000);

[UdhayaKumar Duraisamy]

You can configure the type of Toast in the show method of the ToastUtility component in two different ways. Please find the code examples below, demonstrating both approaches:

Show Toast with predefined types:

  public successToast_1(args: any): void {
    this.toastObj = ToastUtility.show(
      'This works correct',
      'Success',
      20000
    ) as ToastComponent;
  }

Show Toast with ToastModel:

  public successToast_2(args: any): void {
    this.toastObj = ToastUtility.show({
      content: 'Workaround: This works correct',
      cssClass: 'e-toast-success',
      timeOut: 20000,
    }) as ToastComponent;
  }

Sample: 4a2bqg (forked) - StackBlitz

For more information, please refer to Toast services in Angular Toast component | Syncfusion.

[Michael Mairegger]

Yes that is correct, and the same I wrote above in the workaround section. But I think as developer perspective, I would expect that if I call

  public successToast_2(args: any): void {

    this.toastObj = ToastUtility.show({

      content: 'Content',

      title: 'This toast is not shown with the success bg-color',

    }, 'Success') as ToastComponent;

  }

behvaes the same as the overload method without setting the title:

ToastUtility.show(

      'This works correct',

      'Success',

      20000

    ) as ToastComponent;

[UdhayaKumar Duraisamy]

We would like to inform you that the ToastUtility in Toast component supports two different types of Toasts: Predefined type Toast and ToastModel. Each type uses different classes and serves distinct purposes.

1. Predefined type Toast:

• • This type of Toast is created using the ToastUtility.show method.

  • It supports four predefined types: Information, Success, Error, and Warning.

  • These predefined toasts come with essential colors and can be displayed by simply specifying the type without defining any class names.

  • Example usage:

ToastUtility.show('Your message has been sent successfully', 'Success', 20000);

• • For more details, you can refer to the Toast Services documentation.

2. ToastModel:

• • This type of Toast is created using the ToastModel class.

  • It allows for more customization, including properties like events, position, close icon, action buttons, etc.

  • Example usage:

let toastModel: ToastModel = {

  content: 'This is a custom toast message',

  position: { X: 'Right', Y: 'Top' },

  showCloseButton: true

};

ToastUtility.show(toastModel);

• • For more details, you can refer to the ToastModel API documentation.

Both types of Toasts are useful depending on your needs—whether you want a quick, predefined notification or a highly customized one.