1
00:00:00,270 --> 00:00:05,880
In this lecture, we are going to close the model whenever the user clicks on the exit button.

2
00:00:06,150 --> 00:00:08,730
I want you to try this as an exercise.

3
00:00:09,060 --> 00:00:14,220
Listen for a click events on the areas I mentioned earlier during these events.

4
00:00:14,430 --> 00:00:19,020
Call the toggle modal function in the service to close the modal.

5
00:00:19,350 --> 00:00:21,350
Pause the video and good luck.

6
00:00:22,860 --> 00:00:23,700
Welcome back.

7
00:00:23,940 --> 00:00:26,790
If you're able to close the model, congrats.

8
00:00:26,940 --> 00:00:28,930
If not, that's fine as well.

9
00:00:29,280 --> 00:00:31,380
Let's work on the solution together.

10
00:00:31,680 --> 00:00:35,490
We will start by working inside the modal template file.

11
00:00:38,220 --> 00:00:45,270
Inside this template, there's a comment that says modal B.G. overlay below this comment, we will find

12
00:00:45,270 --> 00:00:47,760
the HTML elements for the overlay.

13
00:00:48,240 --> 00:00:52,470
The overlay is the semi-transparent background behind the modal.

14
00:00:52,860 --> 00:00:59,760
Let's close the model when the user clicks on this element on the div tag, we will listen for the click

15
00:00:59,760 --> 00:01:00,270
event.

16
00:01:03,020 --> 00:01:07,490
Inside this event, we will run a function called Close Mode All.

17
00:01:10,050 --> 00:01:16,440
Previously, we would pass on the event, object to the function by passing on this object.

18
00:01:16,680 --> 00:01:21,390
We could call the prevent default function from preventing the default behavior.

19
00:01:21,660 --> 00:01:26,370
However, we're going to be applying our click listeners to div tags.

20
00:01:26,760 --> 00:01:32,610
Clicks on div tags will not cause the browser to redirect the user to a different page.

21
00:01:32,970 --> 00:01:35,790
Therefore, it's safe not to call this method.

22
00:01:36,090 --> 00:01:40,290
We can save ourselves the time of calling B prevent default method.

23
00:01:40,950 --> 00:01:44,460
This close modal method doesn't exist in our component.

24
00:01:44,730 --> 00:01:46,830
We should define it in our class.

25
00:01:47,130 --> 00:01:51,570
Before we do, we should apply the click binding to the closed button.

26
00:01:51,930 --> 00:01:54,240
Let's make a copy of the click event.

27
00:01:56,770 --> 00:01:59,200
Next, search for the close button.

28
00:01:59,530 --> 00:02:03,520
It can be found under a comment that says Model close button.

29
00:02:06,130 --> 00:02:09,430
We will paste the event listener on the div tag.

30
00:02:11,980 --> 00:02:18,460
All right, it's time to call the toggle modal function open, the modal component class file.

31
00:02:21,310 --> 00:02:24,880
Inside the class defined the closed modal function.

32
00:02:27,480 --> 00:02:32,550
Lastly, we all call the this dark mode toggle mode or function.

33
00:02:35,070 --> 00:02:35,970
That should do it.

34
00:02:36,150 --> 00:02:37,830
Let's test our application.

35
00:02:40,430 --> 00:02:46,640
After opening the model, we should be able to close it by clicking on the closed button or the overlay

36
00:02:47,030 --> 00:02:51,320
just to make sure click on the model, but not on the closed button.

37
00:02:51,740 --> 00:02:57,410
We want to make sure the model doesn't close if the user clicks on an area that shouldn't close the

38
00:02:57,410 --> 00:03:02,120
model after verifying everything works out yourself on the back.

39
00:03:02,420 --> 00:03:05,420
We've created a model in the next lecture.

40
00:03:05,450 --> 00:03:09,230
We are going to improve this implementation even further.