How to Hide a Div Tag Like a Toast Message in Lightning Web Components

Lets understand how we can hide a div like a toast message.

HTML File:

<div data-id="overview" class="red-bg">

  <lightning-formatted-text value={errorMsg}>

</lightning-formatted-text>

</div>

In this HTML file, we are creating a div element and will set a data-id

Data-id value will be used in the JS file to show or hide the div.

Js File:

We can call this hidemsg() method from the success of a server call.

This above div tag will be hidden after 5 secs

hidemsg(){

 setTimeout(() => {

this.template.querySelector('[data-id="overview"]').style.display 

='none';

  }, "5000")

}

When this hidemsg() is called, we can add setTimeout()

method will put a delay.