Toast Notification in Lightning Web Component

In this section, we will see how to display toast notification and how to take user input through Lightning Web Component. The toast notification behavior is same as Lightning Aura Component. Following steps need to be maintained to fulfill the business.

We have created a Lightning Web Component named “displayToast.html”

Step 1: First, we need to update the displayToast.js-meta.xml file to set the LWC visibility in App Builder.

displayToast.js-meta.xml

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

Step 2: We have updated the html file in such a way user can select the toast variant such as Success, Warning & Error along with the input message.

displayToast.html

<template>
        <lightning-card title="Show Toast Message">    
            
<div class="inputClass">
                <lightning-layout >
                    <lightning-layout-item flexibility="auto" padding="around-small">
                        <lightning-input type="text" label="Message " value={msg} onchange={trackMessage}></lightning-input>
                        <lightning-combobox label="Variant" value={variant} onchange={updateVariant} options={variantOptions}></lightning-combobox>
                        
<div class="slds-float_right slds-m-top_medium">
                            <lightning-button variant="brand" label="Show Notification" onclick={showToast} ></lightning-button> &nbsp;&nbsp;
                            <lightning-button variant="brand" label="Reset" onclick={doReset}></lightning-button>
                        </div>

  
                    </lightning-layout-item>
                </lightning-layout>
            </div>

        </lightning-card>
</template>

Step 3: Need to update the JS file.

displayToast.js

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

export default class DisplayToast extends LightningElement {
    @track msg;
    @track variant; /* understand the with/without @track & api*/
    title="Notification"
    variant = 'success';
    variantOptions = [
        {label : 'error', value : 'error'},
        {label : 'warning', value : 'warning'},
        {label : 'success', value : 'success'},
        {label : 'info', value : 'info'}
    ];

    updateVariant(event){
        this.variant = event.target.value;
    }

    trackMessage(event){
        this.msg = event.target.value;
    }

    showToast(){
        /*eslint-disable-next-line  no-console*/
        console.log('entry point');
        const evt = new ShowToastEvent({
            
            title: this.title,
            message: this.msg,
            variant: this.variant
        });
        this.dispatchEvent(evt);
    }

    doReset(){
        this.msg = '';
        this.variant = 'success';
    }
}

If you see the second line of this JS file, we have imported “platformShowToastEvent” to use the toast function in our Lightning web Component.

We have declared variantOptions to display the variants to the user. trackMessage() & updateVariant() functions have been used to get the input message & toast variant type from the end user.

In showToast() function, we have used standard ShowToastEvent() event along with the properties such as title, message, variant and dispatch the standard toast event. This showToast() function is invoked after clicked on “Show Toast Notification” button.

Reset has been used to restore the previous inputs.

Step 4: At last, need to add this LWC in Lightning App Page.

Result

Here, We have selected the variant as “success” and entered the message as “Showing Toast Example”, so after clicked on “Show Toast Notification” button, it’s displaying the toast message.

Notes
One more property called “mode” is present in ShowToastEvent(). There are three types of mode such as

• dismissable: It’s automatically dismissed until you have not clicked in 3 seconds. It is the default property.
• pester: It’s visible until user is clicked close button.
• sticky: It’s visible for 3 seconds.

15,909 total views, 3 views today