1 00:00:00,180 --> 00:00:05,130 In this lecture, we are going to make one final change to our modal components. 2 00:00:05,400 --> 00:00:11,430 Like before we will look at the problem first, after we talk about the problem, we will implement 3 00:00:11,430 --> 00:00:12,210 a solution. 4 00:00:12,570 --> 00:00:16,079 The final problem with our model is a CSIS issue. 5 00:00:16,410 --> 00:00:19,860 For this demonstration, open the app template file. 6 00:00:22,380 --> 00:00:26,940 Inside this template, we are loading the authentication modal component. 7 00:00:27,210 --> 00:00:30,900 At the moment, it's being rendered in the browser without a problem. 8 00:00:31,170 --> 00:00:34,860 However, it's not completely safe from CIUSSS issues. 9 00:00:35,130 --> 00:00:38,400 We may want to load the model from a nested element. 10 00:00:38,700 --> 00:00:45,450 For example, I'm going to move the model from its current location to inside these section tags. 11 00:00:47,890 --> 00:00:54,100 Next, I'm going to add a class to these section tags called text read Five Hundred. 12 00:00:56,680 --> 00:00:58,540 This class can affect the model. 13 00:00:58,780 --> 00:01:01,390 Let's refresh the page to see what happens. 14 00:01:03,870 --> 00:01:10,590 If we open the model, the text color of the model has changed to read, this issue happens because 15 00:01:10,590 --> 00:01:16,510 of CFS child elements will inherit excess properties from their parent elements. 16 00:01:16,890 --> 00:01:21,120 Naturally, this is the default functionality of CFS. 17 00:01:21,540 --> 00:01:28,380 One solution to get around this problem is by inserting our modal components in the true location of 18 00:01:28,380 --> 00:01:32,040 our app template that can work, but it's not ideal. 19 00:01:32,580 --> 00:01:35,340 Our model should work anywhere in our app. 20 00:01:35,670 --> 00:01:38,670 They should remain unaffected by parent elements. 21 00:01:39,000 --> 00:01:42,420 A model is a UI that appears outside of the app. 22 00:01:42,750 --> 00:01:47,010 It should stand independently from the natural structure of our document. 23 00:01:47,550 --> 00:01:50,460 We can fix this issue by removing our model. 24 00:01:50,820 --> 00:01:56,250 This technique is supported in frameworks like React and View React calls. 25 00:01:56,250 --> 00:02:01,710 This feature portals view calls this feature teleportation in angular. 26 00:02:01,890 --> 00:02:04,650 There isn't a feature for handling this task. 27 00:02:04,920 --> 00:02:09,340 Luckily, we can easily implement this feature in our editor. 28 00:02:09,360 --> 00:02:12,270 We will open the modal component class file. 29 00:02:14,570 --> 00:02:21,020 We are going to update the import statements of the angular slash core package to include an object 30 00:02:21,020 --> 00:02:22,520 called Element Ref. 31 00:02:25,200 --> 00:02:31,860 The Element Ref object gives us access to the host element of our component to better understand. 32 00:02:32,070 --> 00:02:34,920 Let's check out the app in the browser for a moment. 33 00:02:37,360 --> 00:02:43,780 We've talked about the host element before under the elements panel and the developer tools, we can 34 00:02:43,780 --> 00:02:45,790 inspect the structure of our app. 35 00:02:46,270 --> 00:02:50,680 Angular does not replace the custom component we've defined in our app. 36 00:02:51,040 --> 00:02:55,490 Instead, the template gets inserted inside of the component tags. 37 00:02:55,810 --> 00:03:02,410 The component tag is considered the host element by injecting the Element Ref object. 38 00:03:02,560 --> 00:03:06,730 We will be given access to the respective components host element. 39 00:03:07,180 --> 00:03:13,450 Our main objective is to transfer the element from its current location to the documents route, which 40 00:03:13,450 --> 00:03:16,820 is the body tag before we can move the element. 41 00:03:16,840 --> 00:03:19,540 We need to grab it back in the ED.. 42 00:03:19,690 --> 00:03:24,010 We are going to inject the element ref object into our components. 43 00:03:26,570 --> 00:03:31,710 The name of the argument will be called L inside the constructor function. 44 00:03:31,730 --> 00:03:34,430 We are going to log the element object. 45 00:03:39,560 --> 00:03:41,600 Next, refresh the page. 46 00:03:44,150 --> 00:03:48,740 Under the console panel, we will find the host element has been locked. 47 00:03:49,160 --> 00:03:53,030 This object contains one property called native elements. 48 00:03:53,360 --> 00:03:55,940 It contains the actual host element. 49 00:03:56,360 --> 00:04:01,820 You can think of the element reference class as a wrapper around the native Dom elements. 50 00:04:02,210 --> 00:04:08,900 Now that we have the host element, we can begin moving it back in the ED. We are going to remove the 51 00:04:08,900 --> 00:04:10,130 console statements. 52 00:04:12,690 --> 00:04:20,820 Next, inside the energy on init function, we will call the document body not a pen child function. 53 00:04:23,490 --> 00:04:30,300 We will move the element after the energy on init IT function is called, this hook runs after the component 54 00:04:30,300 --> 00:04:31,590 has been initialized. 55 00:04:31,890 --> 00:04:34,380 It's the soonest we can move the element. 56 00:04:34,710 --> 00:04:40,050 We are going to pass in the whisked Element Typekit native element property. 57 00:04:42,590 --> 00:04:45,180 We're finished with two lines of code. 58 00:04:45,200 --> 00:04:47,060 We were able to move the motel. 59 00:04:47,360 --> 00:04:49,070 Our problems should be fixed. 60 00:04:49,280 --> 00:04:51,230 Refresh the page in the browser. 61 00:04:53,710 --> 00:04:58,720 If we scroll down the text inside the section we modified has the color red. 62 00:04:59,170 --> 00:05:03,130 If we were to open the model, the model's color doesn't change. 63 00:05:03,340 --> 00:05:04,540 It remains white. 64 00:05:04,870 --> 00:05:06,400 The component is functional. 65 00:05:06,400 --> 00:05:12,160 Too angular is capable of toggling the modal despite moving to a different location. 66 00:05:12,760 --> 00:05:14,440 Our component is complete. 67 00:05:14,710 --> 00:05:17,860 We spent several lectures working on the model. 68 00:05:18,130 --> 00:05:24,220 It's one of the most challenging UI elements to work on because of the various edge cases that can pop 69 00:05:24,220 --> 00:05:24,490 up. 70 00:05:24,790 --> 00:05:27,790 We can start to move on to the content of the modal. 71 00:05:28,000 --> 00:05:34,480 Before we do, let's remove the text read five hundred class from the section elements. 72 00:05:36,970 --> 00:05:41,310 We will also move the mobile component back to the root of the template. 73 00:05:43,850 --> 00:05:48,380 In the next lecture, we are going to start working on a tab component.