function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Israel JimenezIsrael Jimenez 

How can I use a ToastEvent in LightningModal LWC?

Hi everybody!!

When I use the 
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 
on
 
...extends LightningModal {}
 
Show me a error:
 [Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.]
 
Help me, please!
 
Thanks!!
VinayVinay (Salesforce Developers) 
Hi Israel,

It should be like below format. 
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class ToastNotificationExampleLWC extends LightningElement {
    showErrorToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Error',
            message: 'Some unexpected error',
            variant: 'error',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showSuccessToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Success',
            message: 'Opearion sucessful',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showWarningToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Warning',
            message: 'Some problem',
            variant: 'warning',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
    showInfoToast() {
        const evt = new ShowToastEvent({
            title: 'Toast Info',
            message: 'Operation will run in background',
            variant: 'info',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
    }
}

Check below reference for same.
https://www.sfdcpoint.com/salesforce/lightning-web-component-lwc-toast-messages/
https://www.biswajeetsamal.com/blog/lightning-web-componentlwc-toast-messages/

Please mark as Best Answer if above information was helpful.

Thanks,
Hitesh PuriHitesh Puri
Hi Israel,

To trigger a toast from a Lightning web component, in the component’s JavaScript class, import ShowToastEventfrom lightning/platformShowToastEvent.

I have mentioned the format:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'; //Importing ToastEvent

export default class MyComponent extends LightningElement {
      handleButtonClick() {
            const event = new ShowToastEvent({
                 title: 'Success',
                 message: 'The operation was successful.',
                 variant: 'success',
            });
            this.dispatchEvent(event);
      }
}

For more information and detailed documentation, you can also refer to the: SFDC Point (https://www.sfdcpoint.com/salesforce/lightning-web-component-lwc-toast-messages/" target="_blank) and Salesforce Document (https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event/documentation" target="_blank)