1
00:00:00,630 --> 00:00:05,850
In this lecture, we are going to toggle the visibility of the model with our service.

2
00:00:06,090 --> 00:00:08,310
It's going to involve a lot of methods.

3
00:00:08,580 --> 00:00:12,480
The service should handle updating the visibility of the model.

4
00:00:12,780 --> 00:00:17,850
Anything related to the data of the model should be handled in the model service.

5
00:00:18,180 --> 00:00:20,040
Let's open it in our editor.

6
00:00:22,610 --> 00:00:27,530
First, we are going to add the private modifier to the invisible property.

7
00:00:30,040 --> 00:00:36,730
This property should be privatized to prevent other components from accessing it by keeping our data

8
00:00:36,730 --> 00:00:37,390
private.

9
00:00:37,610 --> 00:00:41,110
It'll be easier to track where changes are made to it.

10
00:00:41,410 --> 00:00:46,990
We won't have to search through dozens of files to find where the property is being changed.

11
00:00:47,260 --> 00:00:53,920
However, it does mean we will need to create a method for returning the value inside the class.

12
00:00:54,100 --> 00:00:57,550
We will define a method called is modal visible.

13
00:01:00,150 --> 00:01:03,930
Inside this method, we will return the visible property.

14
00:01:06,510 --> 00:01:13,680
Next, we will create a method for toggling the invisible property to find a method called toggle model.

15
00:01:16,250 --> 00:01:20,870
Inside this method, we will set the visible property to its opposite.

16
00:01:23,100 --> 00:01:29,490
Generally, it's considered good practice to define methods for retrieving and updating properties in

17
00:01:29,490 --> 00:01:30,270
your class.

18
00:01:30,570 --> 00:01:35,610
It gives us control over how an external class can interact with our service.

19
00:01:36,000 --> 00:01:37,290
Our service is ready.

20
00:01:37,680 --> 00:01:41,310
The next step is to call these methods from our components.

21
00:01:41,640 --> 00:01:43,890
Let's start with the modal component.

22
00:01:44,190 --> 00:01:46,380
Open the modal template file.

23
00:01:49,040 --> 00:01:56,600
On the root element, we should add the hidden class as a reminder, the hidden class will set the display

24
00:01:56,600 --> 00:01:58,670
property of an element to none.

25
00:01:59,120 --> 00:02:03,470
This time, the class should be dynamically bound to the elements.

26
00:02:03,770 --> 00:02:08,360
We can add the energy class directive with property binding to help us.

27
00:02:10,940 --> 00:02:15,410
We will set this directive to an object inside the object.

28
00:02:15,470 --> 00:02:22,220
We will add the hidden class, the condition for the class will be modal dot is modal open.

29
00:02:24,820 --> 00:02:28,030
The Moto Service is accessible in our templates.

30
00:02:28,510 --> 00:02:35,050
It is a public property that's important to understand if the access were set to private.

31
00:02:35,290 --> 00:02:41,170
We would not be able to use properties in our template even if they are defined inside the component

32
00:02:41,170 --> 00:02:41,770
class.

33
00:02:42,190 --> 00:02:45,610
The IS moto open function should return false.

34
00:02:45,940 --> 00:02:48,160
It's the default value of the model.

35
00:02:48,520 --> 00:02:51,670
We want our models to be hidden when the page loads.

36
00:02:51,940 --> 00:02:56,620
However, this class should only be applied if the value is false.

37
00:02:56,980 --> 00:03:00,100
Therefore, we will add the negation operator.

38
00:03:02,620 --> 00:03:04,210
Let's refresh the page.

39
00:03:06,620 --> 00:03:08,300
Bimodal has disappeared.

40
00:03:08,570 --> 00:03:09,050
Great.

41
00:03:09,320 --> 00:03:14,650
It's time to start toggling the visibility with the other methods in our editor.

42
00:03:14,900 --> 00:03:17,930
Open the navigation component class file.

43
00:03:20,540 --> 00:03:23,360
The service is not available in this components.

44
00:03:23,510 --> 00:03:26,870
We need to inject it at the top of the file.

45
00:03:26,990 --> 00:03:29,900
We will import the modal service object.

46
00:03:32,510 --> 00:03:39,590
Next, we will create a property called Modal Annotated with the modal service object in the constructor

47
00:03:39,590 --> 00:03:40,130
function.

48
00:03:42,900 --> 00:03:46,860
After injecting the service, we can use it in our component.

49
00:03:47,190 --> 00:03:49,890
Open the navigation template file.

50
00:03:52,400 --> 00:03:58,490
Search for the log in link in the template, you can find it under the section that says navigation

51
00:03:58,490 --> 00:03:59,030
links.

52
00:04:01,420 --> 00:04:05,080
On the anchor element, we will listen for the click event.

53
00:04:07,590 --> 00:04:11,310
We are going to attempt to open the model when this link is clicked.

54
00:04:11,640 --> 00:04:14,880
You may be tempted to call the toggle mode or function.

55
00:04:15,120 --> 00:04:18,089
However, we are clicking on an anchor element.

56
00:04:18,450 --> 00:04:20,640
The browser may redirect the user.

57
00:04:20,940 --> 00:04:24,090
This behavior is natural for anchor elements.

58
00:04:24,390 --> 00:04:28,210
We should prevent the default behavior before toggling the modal.

59
00:04:28,660 --> 00:04:34,680
Instead, we are run a function called open model with the event object passed in.

60
00:04:37,330 --> 00:04:43,960
As a reminder, the event object is available in our templates, we can pass it on to the methods and

61
00:04:43,960 --> 00:04:44,890
our components.

62
00:04:45,220 --> 00:04:48,760
Let's switch back to the navigation component class.

63
00:04:49,090 --> 00:04:53,290
We will define the open modal method with the event argument.

64
00:04:55,980 --> 00:05:03,870
The event argument will be annotated with the event object inside this method, we will call the prevent

65
00:05:03,870 --> 00:05:05,010
default function.

66
00:05:07,730 --> 00:05:14,210
The prevent default function will prevent the default behavior of the browser by calling this method.

67
00:05:14,420 --> 00:05:18,950
Users will not unexpectedly be redirected to a different page.

68
00:05:19,280 --> 00:05:24,350
We can proceed to call the this stop modal toggle mode or function.

69
00:05:26,970 --> 00:05:28,350
Let's test our app.

70
00:05:30,850 --> 00:05:34,150
If we pressed the log in link, the model should appear.

71
00:05:34,480 --> 00:05:41,440
We've successfully opened the model to recap, we've defined a set of methods for interacting with the

72
00:05:41,440 --> 00:05:42,700
visible property.

73
00:05:43,090 --> 00:05:48,550
We can call these methods to affect the appearance of the model in the next lecture.

74
00:05:48,580 --> 00:05:51,250
We will start working on closing the model.