In this lecture, we are going to close the model whenever the user clicks on the exit button.
I want you to try this as an exercise.
Listen for a click events on the areas I mentioned earlier during these events.
Call the toggle modal function in the service to close the modal.
Pause the video and good luck.
Welcome back.
If you're able to close the model, congrats.
If not, that's fine as well.
Let's work on the solution together.
We will start by working inside the modal template file.
Inside this template, there's a comment that says modal B.G. overlay below this comment, we will find
the HTML elements for the overlay.
The overlay is the semi-transparent background behind the modal.
Let's close the model when the user clicks on this element on the div tag, we will listen for the click
event.
Inside this event, we will run a function called Close Mode All.
Previously, we would pass on the event, object to the function by passing on this object.
We could call the prevent default function from preventing the default behavior.
However, we're going to be applying our click listeners to div tags.
Clicks on div tags will not cause the browser to redirect the user to a different page.
Therefore, it's safe not to call this method.
We can save ourselves the time of calling B prevent default method.
This close modal method doesn't exist in our component.
We should define it in our class.
Before we do, we should apply the click binding to the closed button.
Let's make a copy of the click event.
Next, search for the close button.
It can be found under a comment that says Model close button.
We will paste the event listener on the div tag.
All right, it's time to call the toggle modal function open, the modal component class file.
Inside the class defined the closed modal function.
Lastly, we all call the this dark mode toggle mode or function.
That should do it.
Let's test our application.
After opening the model, we should be able to close it by clicking on the closed button or the overlay
just to make sure click on the model, but not on the closed button.
We want to make sure the model doesn't close if the user clicks on an area that shouldn't close the
model after verifying everything works out yourself on the back.
We've created a model in the next lecture.
We are going to improve this implementation even further.