1 00:00:03,910 --> 00:00:06,100 Hello, everyone, and welcome back. 2 00:00:06,290 --> 00:00:12,790 Now that we have covered MGD and the host modifiers, let's talk about another feature of angular review 3 00:00:12,790 --> 00:00:13,700 encapsulation. 4 00:00:13,750 --> 00:00:20,020 Sometimes we just want to style our components depending on something that is happening outside the 5 00:00:20,020 --> 00:00:21,190 component itself. 6 00:00:21,370 --> 00:00:28,300 There are situations where, for example, we might want to change the background, of course, given 7 00:00:28,300 --> 00:00:33,200 the presence of a certain theme that gets applied externally to the components. 8 00:00:33,220 --> 00:00:39,850 So let's say that in certain situations we would like to make the background can have a light Solomont 9 00:00:39,850 --> 00:00:47,200 color and we want to apply this only if the theme that is getting applied here to the template is the 10 00:00:47,200 --> 00:00:48,410 Sulman theme. 11 00:00:48,430 --> 00:00:54,880 So for that we would wrap the course Carveth element into a def containing this Sears's class. 12 00:00:54,910 --> 00:01:01,540 The presence of this Cyesis class would imply that all conservatives have this background. 13 00:01:01,570 --> 00:01:03,700 So let's try to see if this works. 14 00:01:03,700 --> 00:01:08,980 We are going to take this Cyesis class, which is a theming class, and we're going to try to apply 15 00:01:08,980 --> 00:01:10,720 it here to our course curve. 16 00:01:10,750 --> 00:01:16,280 Let's find here in our template apparent element that contains our cost curve. 17 00:01:16,480 --> 00:01:18,910 In this case, it's going to be here, the courses div. 18 00:01:18,910 --> 00:01:25,540 So let's apply here the Solomon theme and see if this changes the background here of our components. 19 00:01:25,540 --> 00:01:29,790 If we try this out, we are going to see that the background remains unchanged. 20 00:01:29,800 --> 00:01:35,590 And let's switch here to a larger window to understand why we are going to inspect the styles that are 21 00:01:35,590 --> 00:01:37,210 being created by ANGULAR. 22 00:01:37,220 --> 00:01:41,630 And if we scroll down we are going to find here the Solman Feme style. 23 00:01:41,710 --> 00:01:49,240 So as you can see, what is happening here is that because we defined our Sulman Feme selecter inside 24 00:01:49,240 --> 00:01:56,190 the coursework component stylesheet, this style is being made specific to elements of the course Kerth 25 00:01:56,200 --> 00:01:57,570 component templates. 26 00:01:57,640 --> 00:02:04,450 So in order for this to work, we want to remove this part of The Selecter, the energy content dachsie, 27 00:02:04,450 --> 00:02:09,930 one attribute that is making the Sulman feme specific to the core components. 28 00:02:09,940 --> 00:02:14,660 Only now one way of doing it would be to use Engy deep here. 29 00:02:14,770 --> 00:02:20,470 So if we use engy the pier at the beginning of the style, we are going to see that now. 30 00:02:20,470 --> 00:02:27,070 The background is getting correctly applied and if we switch over here to our larger window and we expect 31 00:02:27,070 --> 00:02:33,280 the style that we are getting applied here, we are going to see that indeed all the specificity of 32 00:02:33,280 --> 00:02:35,070 the style has been removed. 33 00:02:35,080 --> 00:02:39,000 We have applied in deep at the beginning of The Selecter. 34 00:02:39,010 --> 00:02:43,970 So now this style is applicable to any course cards on the page. 35 00:02:43,990 --> 00:02:50,500 So this means that this style is no longer specific to the Coast Guard component, which is a bit more 36 00:02:50,500 --> 00:02:51,500 than what we want. 37 00:02:51,580 --> 00:02:58,630 So if we switch here and we try to use this style here at the level of the course curve and we create 38 00:02:58,630 --> 00:03:07,000 here a div that is going to contain both the test card and here our course card component and we apply 39 00:03:07,000 --> 00:03:12,910 here the Sulman Feme not here to the courses div, but to these new parent, Dave. 40 00:03:12,910 --> 00:03:19,480 What we are going to see is that the Sulman theme is now going to get applied to both our test cards 41 00:03:19,750 --> 00:03:22,360 and to the Coast Guard component itself. 42 00:03:22,480 --> 00:03:24,450 So this is a bit more than what we want. 43 00:03:24,460 --> 00:03:32,260 We still want to somehow make this style specific to the component itself and have it not affect other 44 00:03:32,260 --> 00:03:33,350 styles on the piece. 45 00:03:33,370 --> 00:03:38,830 So if you are using Engy deep at the beginning of a style, we might as well just move these into the 46 00:03:38,830 --> 00:03:40,050 global stylesheets. 47 00:03:40,060 --> 00:03:42,360 The result is exactly the same. 48 00:03:42,490 --> 00:03:48,100 It's still a good thing to know that we can always bypass completely the angular view encapsulation 49 00:03:48,100 --> 00:03:49,240 mechanism this way. 50 00:03:49,360 --> 00:03:56,470 But instead of using here MGD, let's use something else we are going to use instead the host contexts 51 00:03:56,470 --> 00:03:57,900 cyesis modify it. 52 00:03:57,910 --> 00:04:05,640 So this is angular specific and this can be applied to only a section here of our CSF selected. 53 00:04:05,650 --> 00:04:12,660 So we are going to apply it here only to the Solomon feme part and not here to our course Carlat selector. 54 00:04:12,790 --> 00:04:18,880 If we try this out we are going to see that this time around our Sulman Feme is only getting applied 55 00:04:18,880 --> 00:04:26,140 here to our course curve component and not to our test captive, which is exactly what we wanted. 56 00:04:26,170 --> 00:04:33,850 And these works because the part of our style inside the parenthesis of the host context modifier is 57 00:04:33,850 --> 00:04:36,100 being made generic to the whole page. 58 00:04:36,400 --> 00:04:43,360 But the second reminder part of our series says selected that comes after a host context is still being 59 00:04:43,360 --> 00:04:46,130 made specific to the course CURTH component. 60 00:04:46,150 --> 00:04:53,110 So as we can see, host context does indeed allow us to sell our component depending on the presence 61 00:04:53,110 --> 00:04:56,640 of Cyesis styles outside the component itself. 62 00:04:56,650 --> 00:05:00,370 And with this we have covered the host context selector now before. 63 00:05:00,490 --> 00:05:07,270 Starting our new section on services in a deep dive in dependency injection, let's quickly wrap up 64 00:05:07,270 --> 00:05:09,280 here the View encapsulation section. 65 00:05:09,280 --> 00:05:14,350 Let's talk about the multiple modes that we have available for doing view encapsulation.