Toast Notification in Lightning Web Components | ShowToastEvent | (LWC)

Lets talk about how to fire Toast Notification in Lightning web component | LWC. Toast message is used to pop up the alert message to user. To display toast notification you need to import the ShowToastEvent from lightning/platformShowToastEvent module and dispatch the ShowToastEvent event with message , title and variant.

Syntax 

ShowToastMessage() {
     const toastEvnt = new  ShowToastEvent( {
           title: 'Welcome in Apex Hours',
           message: 'This is your toast message',
           variant: 'info',
     });
     this.dispatchEvent (toastEvnt);

}


Here is sample code:-

toastMessage.html

<template>
    <lightning-card title="Show Toast Message" icon-name="custom:custom56">
        <lightning-input label="Message" value={msg} onchange={msgchange}></lightning-input>
        <lightning-button label="Show Toast Message" onclick={ShowToastMessage}></lightning-button>
    </lightning-card>
</template>

toastMessage.js

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

export default class ToastMessage extends LightningElement {
    msg = '';
    msgchange(event){
        this.msg = event.target.value;
    }
    ShowToastMessage() {
        const toastEvnt = new  ShowToastEvent( {
              title: 'Welcome in Apex Hours' ,
              message: this.msg ,
              variant: 'success' ,
        });
        this.dispatchEvent (toastEvnt);
   }
}

toastMessage.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ToastMessage">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output

Check this post for more detail.

Please check below post on Lightning Web Components:-

1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs
4. How to get current user id in lightning web component | Access logged in user ID in LWC

Check our YouTube Channel for more recording in Lightning Web Components. 

Thanks,
Amit Chaudhary
amit.salesforce21@gmail.com

  @amit_sfdc    @ApexHours
  Salesforce Apex Hours 
    #SalesforceApexHours