All language subtitles for 018 Closing the Modal_en

In this lecture, we're going to close the modal.

It'll be a simple and quick fix.

Unlike before, we're not going to map the store since we learned how to map the state.

I think mapping the state will suffice for demonstration purposes.

I want to show you different ways of tackling the same problem.

At the end of the day, it's up to you.

Let's open the authentication component file.

Scroll to the script block.

Let's import the map writable state function from the penny package.

Inside the computed object.

Let's call this function with the spread operator.

Pass in the use model store object.

Lastly pass in an array and this array add the is open state property.

Great.

Our state property is ready.

The goal is to set this property to false.

By doing so, the modal will close.

Scroll to the template.

Search for a comment that says Modal Close Button.

Below this comment we'll find a div tag with the class modal close.

This element will contain the closed button for the modal.

We're going to listen for the click event.

Inside the event set the is open property to false.

Save your changes and refresh the page.

Let's test the model by opening and closing it.

Voila.

Previously, we defined a method to toggle the property.

However, it's perfectly fine to toggle the value from the event.

In addition, we mapped the state instead of the store.

Pernilla is very flexible.

It provides various options for interacting with the state.

In the next lecture, we'll look at further improvements we can make.