1
00:00:00,330 --> 00:00:06,750
In this lecture, we are going to update our components to start using our services ID system at the

2
00:00:06,750 --> 00:00:07,200
moment.

3
00:00:07,440 --> 00:00:13,380
Our app is completely broken because our components are not correctly using our services functions.

4
00:00:13,590 --> 00:00:14,670
Let's fix that.

5
00:00:14,970 --> 00:00:20,100
We will start with opening the modal open the navigation component class file.

6
00:00:22,560 --> 00:00:26,190
Inside this class, we have a function called open modal.

7
00:00:26,430 --> 00:00:28,950
It's invoking the toggle modal function.

8
00:00:29,250 --> 00:00:30,720
We need to pass in an ID.

9
00:00:31,350 --> 00:00:35,250
The ID of the model we want to open is called authentication.

10
00:00:37,810 --> 00:00:38,380
Awesome.

11
00:00:38,470 --> 00:00:40,730
Let's move on to closing the component.

12
00:00:41,030 --> 00:00:43,360
Here's where things can get a bit challenging.

13
00:00:43,600 --> 00:00:45,670
Open the modal template file.

14
00:00:48,100 --> 00:00:53,020
On the root element of the templates, we are calling the IS model open function.

15
00:00:53,380 --> 00:00:56,740
The purpose of the modal component is to act as a skeleton.

16
00:00:56,980 --> 00:00:59,920
It shouldn't know which model to open or close.

17
00:01:00,160 --> 00:01:02,260
It needs to be told this information.

18
00:01:02,500 --> 00:01:06,760
We can't hard code the value as we did in the navigation component.

19
00:01:07,300 --> 00:01:13,570
Luckily, the modal component will always be the child component of the component supplying the content.

20
00:01:13,840 --> 00:01:16,060
We have a parent child relationship.

21
00:01:16,390 --> 00:01:20,540
We should use inputs to send down data to the modal component.

22
00:01:20,860 --> 00:01:26,680
By accepting input data, the modal component will know which model to open or close.

23
00:01:27,220 --> 00:01:32,860
Using inputs and outputs is a viable option for parent child component relationships.

24
00:01:33,160 --> 00:01:36,340
Services are great, but not something we will always need.

25
00:01:36,700 --> 00:01:40,000
In this instance, we can get away with using inputs.

26
00:01:40,240 --> 00:01:44,020
Let's open the authentication modal component template file.

27
00:01:46,480 --> 00:01:48,010
We have two models.

28
00:01:48,220 --> 00:01:52,570
We are going to add a property called Model ID on both components.

29
00:01:56,340 --> 00:01:59,340
We will set the first property to authentication.

30
00:01:59,670 --> 00:02:02,400
The second property will be set to test.

31
00:02:04,900 --> 00:02:11,140
Normally we would apply property binding to properties on a component if we all met these square brackets

32
00:02:11,140 --> 00:02:12,110
from a property.

33
00:02:12,220 --> 00:02:15,700
The value for the property will be interpreted as a string.

34
00:02:16,030 --> 00:02:17,320
That's perfectly fine.

35
00:02:17,830 --> 00:02:21,070
The IDs of our models are stored as strings.

36
00:02:21,340 --> 00:02:27,070
If you want, you can apply a property binding if you're going to outsource the IDs to properties from

37
00:02:27,070 --> 00:02:27,820
our class.

38
00:02:28,120 --> 00:02:32,320
However, I think hard coding the IDs will work without a problem.

39
00:02:32,890 --> 00:02:39,310
Let's update the mobile component to accept the IDs open the modal component class file.

40
00:02:41,970 --> 00:02:45,550
We will need to accept the input inside the class.

41
00:02:45,570 --> 00:02:50,190
We will add a property called modal ID with the input decorator.

42
00:02:55,730 --> 00:03:02,210
The initial value of this property will be a stream if you're using visual studio code, the decorator

43
00:03:02,210 --> 00:03:03,980
function should have been imported.

44
00:03:04,340 --> 00:03:10,700
If not, import it manually, it can be found under the angular core package.

45
00:03:11,740 --> 00:03:18,520
Next, we can start using it in our component below, we have a function called closed modal.

46
00:03:18,850 --> 00:03:23,380
We will pass in the modal ID property to the toggle modal function.

47
00:03:25,930 --> 00:03:27,550
Let's go back to the template.

48
00:03:27,850 --> 00:03:30,670
We should update the is modal open function.

49
00:03:30,970 --> 00:03:33,610
We will pass in the modal ID property.

50
00:03:36,090 --> 00:03:39,570
It's time to test our application, refresh the page.

51
00:03:42,030 --> 00:03:44,040
The model is entirely functional.

52
00:03:44,340 --> 00:03:49,650
The problem we had before is gone, the test model never opens or closes.

53
00:03:49,920 --> 00:03:53,520
We have the power to open and close models independently.

54
00:03:53,730 --> 00:03:55,860
We have a fully reusable model.

55
00:03:56,160 --> 00:03:59,130
It took a lot of work, but it was well worth the effort.

56
00:03:59,520 --> 00:04:02,730
Angular makes it super simple to design components.

57
00:04:03,210 --> 00:04:06,810
Before we in this lecture, we should remove the test components.

58
00:04:07,050 --> 00:04:08,430
We don't need it anymore.

59
00:04:08,700 --> 00:04:15,270
We've proven the components can be opened independently back in the ED. We will update the authentication

60
00:04:15,270 --> 00:04:18,959
modal component template file by removing the test model.

61
00:04:21,450 --> 00:04:27,900
We should remove the registration of the test model to open the authentication modal component class

62
00:04:27,900 --> 00:04:28,380
file.

63
00:04:30,920 --> 00:04:36,110
Inside this class file, we will remove the register of function for the test model.

64
00:04:38,590 --> 00:04:41,110
We're finished in the next few lectures.

65
00:04:41,230 --> 00:04:44,140
We are going to make some final improvements to our model.

66
00:04:44,380 --> 00:04:46,060
I'll see you at the next one.