Modal popup in LWC

Since LWC is based on SPA. There is a good possibility that we would have to work with modal popup in LWC.

When we want to provide the option of creating a new record or when we want to update an existing record, we will not have the liberty to redirect the user to a new page, since everything is based on Single Page Architecture in LWC.

The solution in that case is, usage of modal popup in LWC.

Let me give you a use case before we get hands-on. Let's say we want to have a custom implementation of updating a record.

In that case, I would like to have a custom button and I will tie-up the custom functionality to it by making use of modal popup in LWC.

This is how it can be implemented.  

This can be implemented in 2 ways.
1. Making use of JS and HTML attributes
2. Using properties in Lightning Web Components

You can take your pick in terms of which approach has to be used, however, if you are focusing on the performance then it's better to use the first approach as we will not be rendering the component multiple times.

Making use of JS and HTML attributes

Here comes the template file ExploreModalsLWC.html.

And this is going to be the JS file ExploreModalsLWC.js.

In case your object has RecordTypes activated even that can be implemented in the template file. You can do some research on record-type-id on lightning-record-edit-form tag.

There is an alternative approach to achieve this, which is by using properties in LWC.

Using properties in Lightning Web Components

This is the alternative approach, since we are using properties here when ever a property is mutated and when its used in the template file complete template re-renders.

Interested in learning LWC Development with me? Subscribe to my course (use this if you are out of India).