1 00:00:00,480 --> 00:00:05,460 In this lecture, we are going to create an ID system for our models. 2 00:00:05,760 --> 00:00:11,220 New models should be assigned an I.D. if we need to open or close a model. 3 00:00:11,310 --> 00:00:14,010 We should provide the I.D. of the model. 4 00:00:14,310 --> 00:00:19,290 This way, our service can handle a single model instead of all models. 5 00:00:19,620 --> 00:00:24,870 We are going to start by working in the authentication model component class file. 6 00:00:27,460 --> 00:00:33,970 We are going to register models from the parent component, after all, parent components are the ones 7 00:00:33,970 --> 00:00:35,290 creating the models. 8 00:00:35,620 --> 00:00:38,560 We should inform our service of a new model. 9 00:00:38,930 --> 00:00:42,400 Our component will need the model service object. 10 00:00:42,730 --> 00:00:48,130 We will inject bimodal service object in the constructor functions arguments. 11 00:00:50,760 --> 00:00:55,050 Visual Studio should have imported this object for you if it didn't. 12 00:00:55,260 --> 00:00:57,520 Be sure to import it manually. 13 00:00:57,930 --> 00:01:01,770 After injecting the service, we will register a new model. 14 00:01:02,160 --> 00:01:06,510 The model should be registered during the initialization of the components. 15 00:01:06,810 --> 00:01:13,740 We can use the energy on init lifecycle function to help us inside our component class. 16 00:01:13,980 --> 00:01:18,180 We will run a function called this model dot register. 17 00:01:20,730 --> 00:01:23,430 This function doesn't exist in our service. 18 00:01:23,700 --> 00:01:25,800 We will be creating it in a moment. 19 00:01:26,130 --> 00:01:30,990 The register function will allow us to register a new model with our service. 20 00:01:31,320 --> 00:01:35,640 It will have one argument, which is the unique ID for the model. 21 00:01:36,060 --> 00:01:39,030 We are going to call this model authentication. 22 00:01:41,600 --> 00:01:46,790 Next, we will call the register function again with an idea of test. 23 00:01:49,350 --> 00:01:52,800 We are creating a second model for testing purposes. 24 00:01:53,160 --> 00:01:58,080 We will remove the second model after verifying the ID system works. 25 00:01:58,320 --> 00:02:00,810 Let's open the mobile service file. 26 00:02:03,430 --> 00:02:10,830 Inside our service, we are going to create an array to store a list of IDs, each ID will represent 27 00:02:10,840 --> 00:02:12,730 T-Mobile in our class. 28 00:02:12,910 --> 00:02:18,190 We will replace the visible property with a new property called models. 29 00:02:20,750 --> 00:02:23,690 The model's property will be an empty array. 30 00:02:24,110 --> 00:02:29,870 We will push new models into this array before we do, we should add type safety. 31 00:02:30,200 --> 00:02:33,560 At the moment, anything can be pushed into this array. 32 00:02:33,950 --> 00:02:36,800 An interface should be suitable for this task. 33 00:02:37,160 --> 00:02:41,630 Above the class, we will create an interface called AI Modal. 34 00:02:44,210 --> 00:02:50,840 As a reminder, pre fixing an interface name with the letter, I helps other developers identify this 35 00:02:50,840 --> 00:02:54,620 definition as an interface inside this definition. 36 00:02:54,860 --> 00:02:57,830 We will have two properties called ID and. 37 00:02:58,820 --> 00:03:02,690 There are types will be set to string and Boolean respectively. 38 00:03:05,370 --> 00:03:12,120 The I.D. property will help our service identify the modal, whereas the invisible property will serve 39 00:03:12,120 --> 00:03:16,080 the same purpose as the visible property we had in the class. 40 00:03:16,500 --> 00:03:19,230 It'll help our app hide or show a model. 41 00:03:19,620 --> 00:03:22,770 Let's apply this interface to our model's property. 42 00:03:23,130 --> 00:03:29,270 We can annotate an array by adding the name of the table, followed by a pair of square brackets. 43 00:03:31,890 --> 00:03:38,160 By adding this annotation, we can constrain the type of values that can be pushed into the array, 44 00:03:38,640 --> 00:03:39,900 our array is ready. 45 00:03:40,200 --> 00:03:44,320 Let's move on to registering a new model in our class. 46 00:03:44,370 --> 00:03:46,650 We will define the register function. 47 00:03:49,270 --> 00:03:56,780 The register function should accept an argument called I.D. with the type of string inside this function. 48 00:03:56,800 --> 00:04:00,340 We will push a new object into the model's array. 49 00:04:02,600 --> 00:04:05,120 We will pass in the ID argument. 50 00:04:05,420 --> 00:04:09,200 Afterward, we will set the visible property to false. 51 00:04:11,700 --> 00:04:15,930 By default, we should hide the models for testing purposes. 52 00:04:16,079 --> 00:04:20,100 Let's log the model's property after pushing a new model. 53 00:04:22,690 --> 00:04:29,200 Our service is going to be broken because the other two methods in our class relied on the visible property. 54 00:04:29,620 --> 00:04:31,540 This property has been moved. 55 00:04:31,810 --> 00:04:34,210 We will refactor these methods later. 56 00:04:34,540 --> 00:04:40,180 First, we want to test if our models are being registered to fix these errors. 57 00:04:40,330 --> 00:04:44,590 We will update the IS model open function to return true. 58 00:04:47,260 --> 00:04:50,350 The toggle modal function will be commented out. 59 00:04:52,890 --> 00:04:55,140 These changes will not be permanent. 60 00:04:55,440 --> 00:04:57,120 We will refactor them later. 61 00:04:57,360 --> 00:04:58,950 Let's refresh the page. 62 00:05:01,520 --> 00:05:07,280 Both models will appear since our function is returning true inside the console. 63 00:05:07,310 --> 00:05:10,340 We will find two arrays that have been logged. 64 00:05:10,670 --> 00:05:13,850 It's because the register function is called twice. 65 00:05:14,210 --> 00:05:17,720 We care about the second Turay inside this array. 66 00:05:17,810 --> 00:05:22,040 We will find two models that have been registered perfect. 67 00:05:22,310 --> 00:05:25,160 We're successfully keeping track of our models. 68 00:05:25,400 --> 00:05:30,410 We can move on to updating our components to start using the ID system. 69 00:05:30,710 --> 00:05:33,500 Let's handle this task in the next lecture. 70 00:05:33,770 --> 00:05:38,870 Before we do, let's remove the console statement from the register function. 71 00:05:41,350 --> 00:05:42,820 We don't need it anymore. 72 00:05:43,060 --> 00:05:44,710 See you in the next lecture.