1 00:00:03,910 --> 00:00:06,080 Hello, everyone, and welcome back. 2 00:00:06,250 --> 00:00:12,520 Let's now continue this refactoring process and see what other features the angular view encapsulation 3 00:00:12,520 --> 00:00:13,760 mechanism gives us. 4 00:00:13,780 --> 00:00:19,270 We are going to try to refactor the course, description style that we have here that is going to stall 5 00:00:19,280 --> 00:00:22,300 this block of text here below the picture. 6 00:00:22,420 --> 00:00:28,750 So if we try to take this tile, which is very similar to other styles that we have already moved and 7 00:00:28,750 --> 00:00:32,310 we placed it in here inside the component, stylesheet notice. 8 00:00:32,320 --> 00:00:38,800 Well, that when we reload the application, it's clear that at least some of the styling is not correctly 9 00:00:38,800 --> 00:00:39,870 applied here. 10 00:00:39,910 --> 00:00:44,890 We were limiting the maximum width of this description that is no longer occurring. 11 00:00:45,040 --> 00:00:50,530 If we switch here to a larger window and we expect here the course description, we are going to see 12 00:00:50,530 --> 00:00:54,080 that no specific styles are being applied to it. 13 00:00:54,100 --> 00:00:56,860 So these tiles now are not working. 14 00:00:57,040 --> 00:01:02,650 And if we remember before how the styles were being applied, we are going to understand why this style 15 00:01:02,650 --> 00:01:03,550 is not working. 16 00:01:03,670 --> 00:01:11,770 So all these styles that we have created here are being made specific to this particular component template. 17 00:01:11,800 --> 00:01:18,760 So if we have a look here at the header of our page, let's take, for example, these special style 18 00:01:18,760 --> 00:01:20,320 applied here to the cost curve. 19 00:01:20,410 --> 00:01:27,520 And we open here the style tag containing all the styling that is generated by HENGGELER based on our 20 00:01:27,520 --> 00:01:29,730 component cyesis stylesheet. 21 00:01:29,740 --> 00:01:34,600 If we scroll down, we are going to find here the style for the course description. 22 00:01:34,720 --> 00:01:35,710 Here it is. 23 00:01:35,740 --> 00:01:41,710 We are applying the course car description that has excess class, of course curved. 24 00:01:41,770 --> 00:01:47,250 And here the energy content see one unique identifier that we were seeing before. 25 00:01:47,260 --> 00:01:52,660 So this is getting applied to all the elements of the car template and you are applying something similar 26 00:01:52,660 --> 00:01:58,060 here to our course description container that contains here the course description. 27 00:01:58,150 --> 00:02:04,510 Notice that we are trying to apply here the same unique attribute that identifies elements belonging 28 00:02:04,510 --> 00:02:06,160 to the core skirt component. 29 00:02:06,220 --> 00:02:13,630 The problem is that the course description div that we have here does not have that special attribute. 30 00:02:13,780 --> 00:02:21,580 This element here, the course description div instead of having the special attribute Desh C1, which 31 00:02:21,580 --> 00:02:28,180 is the one that is associated to course car components, we have here the attribute C0, which is the 32 00:02:28,180 --> 00:02:33,160 attribute associated here to our application root component. 33 00:02:33,220 --> 00:02:34,000 Take a look here. 34 00:02:34,000 --> 00:02:41,080 The test car has the attributes c0 so this means that from the point of view of angular discourse description 35 00:02:41,080 --> 00:02:48,850 div that we have here is considered an element of the application template, and that's because this 36 00:02:48,850 --> 00:02:53,450 course description was defined here at the level of the application component. 37 00:02:53,560 --> 00:03:00,550 So this is being passed on to the course car component via content projection using the energy content 38 00:03:00,550 --> 00:03:01,120 feature. 39 00:03:01,240 --> 00:03:07,060 So we curl's course description is considered an element of the application component template. 40 00:03:07,060 --> 00:03:13,450 In order to have this tile applied, what we can do is we could remove this from these stylesheet and 41 00:03:13,450 --> 00:03:17,780 we could try to apply it here to the application component stylesheet. 42 00:03:17,800 --> 00:03:21,700 Let's quickly open here this application component stylesheet. 43 00:03:21,700 --> 00:03:27,490 And if we apply here the course description styling in principle, this should work. 44 00:03:27,490 --> 00:03:34,390 We will have to remove this item here because there is no course cards on the application component 45 00:03:34,390 --> 00:03:35,060 template. 46 00:03:35,170 --> 00:03:36,140 Now have a look. 47 00:03:36,160 --> 00:03:40,870 The style is again being correctly applied, but this is not what we want. 48 00:03:40,870 --> 00:03:46,990 We have here a situation where we have a style that belongs to the course cart component here on the 49 00:03:46,990 --> 00:03:48,970 application component stylesheet. 50 00:03:49,060 --> 00:03:56,470 We need to find a way to move the style where it belongs, which is inside the course stylesheet. 51 00:03:56,530 --> 00:04:00,280 This is clearly a style related to Kaskowitz. 52 00:04:00,280 --> 00:04:06,370 So in this situation, what we want to do is we want to be able to style elements that were provided 53 00:04:06,370 --> 00:04:09,220 to our component by content prosection. 54 00:04:09,370 --> 00:04:16,029 These elements are not part of the course car component itself, but still we want to tell them nevertheless. 55 00:04:16,060 --> 00:04:21,250 And in order to do that, we need to bypass the angular view encapsulation mechanism. 56 00:04:21,250 --> 00:04:28,720 In this case, we are going to say that inside the causative we are going to target any course description 57 00:04:28,720 --> 00:04:35,500 element that is inside of it independently if it belongs to the car scarred component or if it does 58 00:04:35,500 --> 00:04:35,910 not. 59 00:04:35,950 --> 00:04:41,530 So in order to bypass the angular view encapsulation mechanism, we are going to be using the angular 60 00:04:41,530 --> 00:04:43,060 engy deep feature. 61 00:04:43,120 --> 00:04:45,580 Now, take a look here at the course description. 62 00:04:45,580 --> 00:04:50,650 If we reload the application now, the description is going to be justified here. 63 00:04:50,650 --> 00:04:56,950 We are no longer having a long description that almost touches the border and if we switch here to a 64 00:04:56,950 --> 00:05:00,370 larger window, we are going to refresh here our application. 65 00:05:00,540 --> 00:05:06,100 And we are going to confirm that, indeed, our course description style is getting correctly applied, 66 00:05:06,180 --> 00:05:13,300 have a look at it with the dev tools, we can see that now our style is being correctly applied as expected. 67 00:05:13,470 --> 00:05:20,010 Notice that the reason why this style now works is because these special attributes engie contain dachsie 68 00:05:20,010 --> 00:05:27,000 one which marks the template elements that are unique to the course template is not getting applied 69 00:05:27,000 --> 00:05:29,650 here anymore to the course description part. 70 00:05:29,790 --> 00:05:37,530 So using engy deep here in our stylesheet at this point in our style selecter is effectively saying 71 00:05:37,530 --> 00:05:45,170 that everything that comes after engy dip should not be made specific to the template by appending here 72 00:05:45,180 --> 00:05:46,840 these special attributes. 73 00:05:46,860 --> 00:05:51,640 Let's now quickly summarize everything that we have learned about Engy Deep Modifier. 74 00:05:51,900 --> 00:05:56,340 So this is a way of bypassing the angular view encapsulation mechanism. 75 00:05:56,340 --> 00:06:04,530 Whenever we apply engy deep to our style, the parts of the selector after Engy Deep is no longer going 76 00:06:04,530 --> 00:06:07,380 to be made specific to a particular component. 77 00:06:07,590 --> 00:06:14,700 The part before Gnjidic is still going to be made specific to that component by applying the special 78 00:06:14,700 --> 00:06:19,140 engy content Dash, 081, etc. property. 79 00:06:19,190 --> 00:06:26,070 A typical use case for Engy Deep is when we want to style elements that we have received in our component 80 00:06:26,070 --> 00:06:27,680 via content projection. 81 00:06:27,930 --> 00:06:31,570 And with this, we have completed our coverage of Engy Deep. 82 00:06:31,590 --> 00:06:33,900 Let's not talk about another angle or view. 83 00:06:33,900 --> 00:06:35,430 Encapsulation modifier. 84 00:06:35,640 --> 00:06:37,920 The host context modifier.