1
00:00:03,730 --> 00:00:05,920
Hello, everyone, and welcome back.

2
00:00:06,310 --> 00:00:11,800
In this lesson, we're going to dive deeper into the angular default view encapsulation mechanism.

3
00:00:11,950 --> 00:00:18,250
We are going to cover the special access modifiers, host, host context and Engy Deep.

4
00:00:18,430 --> 00:00:25,750
Let's have a look here at what other styles we can move from our generic stylesheet into our component

5
00:00:25,760 --> 00:00:26,600
stylesheet.

6
00:00:26,620 --> 00:00:31,870
If you notice, we have here other styles, such as, for example, the title that we can very easily

7
00:00:31,870 --> 00:00:34,710
move inside the component stylesheet.

8
00:00:34,720 --> 00:00:40,330
So if we try this out, we are going to see that the title is still being styled correctly.

9
00:00:40,420 --> 00:00:42,000
But now notice the following.

10
00:00:42,010 --> 00:00:49,300
We also have here other styles that are styling, not something inside the components template, but

11
00:00:49,300 --> 00:00:53,010
these styles are styling the component element itself.

12
00:00:53,020 --> 00:01:01,620
We have here a reference to the core element and not to the core Cyesis class, starting with the dots.

13
00:01:01,660 --> 00:01:07,180
So this is a completely different selecter that is targeting the e-mail element itself.

14
00:01:07,300 --> 00:01:10,120
We have here other styles that are very similar.

15
00:01:10,240 --> 00:01:14,290
We are going to group them together so that we can clearly identify them.

16
00:01:14,290 --> 00:01:18,710
So these styles are clearly styling the e-mail element.

17
00:01:18,850 --> 00:01:25,430
Let's not try to take these elements styles and move them here inside the component style sheet.

18
00:01:25,480 --> 00:01:30,370
So if we try this out, we are going to see that nothing gets changed on the screen.

19
00:01:30,520 --> 00:01:36,550
But if we inspect the screen here using our chrome dev tools in a larger window, we are going to see

20
00:01:36,550 --> 00:01:42,370
that our core element no longer has here the display block property set.

21
00:01:42,400 --> 00:01:44,840
So the style is not working.

22
00:01:44,980 --> 00:01:50,680
Moving back to the component stylesheet, we can see that what's happening here is that these styles

23
00:01:50,680 --> 00:01:53,970
are only visible inside the element itself.

24
00:01:53,980 --> 00:01:59,500
And here we want to style the element and not something inside the element.

25
00:01:59,500 --> 00:02:06,670
We want to style the host element of the component in order to style the host element.

26
00:02:06,700 --> 00:02:09,419
We are going to need these special Syntex.

27
00:02:09,430 --> 00:02:16,860
We cannot reference the element by name here, but instead we are going to use the colon host Syntex.

28
00:02:16,900 --> 00:02:22,930
This is a special keyword introduced by the angular view encapsulation mechanism that is going to allow

29
00:02:22,930 --> 00:02:25,760
us to target the host element of a component.

30
00:02:25,810 --> 00:02:31,480
So if we now reload our application and we expect it here on the larger window, we are going to see

31
00:02:31,480 --> 00:02:35,440
that this time around our style is being correctly applied.

32
00:02:35,650 --> 00:02:37,990
And notice here how this is being.

33
00:02:37,990 --> 00:02:44,350
Then we see that the style is getting applied via an attribute which is different than the attribute

34
00:02:44,350 --> 00:02:45,790
that we were using before.

35
00:02:45,910 --> 00:02:53,470
So before we had our styles applied with this energy content, that one special property that is unique

36
00:02:53,470 --> 00:02:56,930
to the template elements of the course curve component.

37
00:02:57,100 --> 00:03:01,570
However, that's not the property that we are using to sell the host element.

38
00:03:01,600 --> 00:03:06,460
What we are using is the special property engy host that C1.

39
00:03:06,640 --> 00:03:12,670
If you have a look here at the you are going to see that only the host element of the course component

40
00:03:12,670 --> 00:03:15,060
has this properly applied to it.

41
00:03:15,070 --> 00:03:20,840
The child elements of these components, however, don't have the special properties.

42
00:03:20,860 --> 00:03:23,530
This is only applied to the host element.

43
00:03:23,660 --> 00:03:28,590
And again, every component has its own unique host attribute property.

44
00:03:28,600 --> 00:03:34,240
If we shake here our application route, we are going to see the unique identifier for the host element

45
00:03:34,240 --> 00:03:36,330
is going to be that C0.

46
00:03:36,400 --> 00:03:42,700
So if we will have here multiple instances, of course, cards on this page, they will all have the

47
00:03:42,710 --> 00:03:43,840
same property.

48
00:03:43,840 --> 00:03:46,000
Engle's Desh C1.

49
00:03:46,060 --> 00:03:53,640
This is the property that allows us to create styles that are applied to the course host element.

50
00:03:53,740 --> 00:03:59,830
Now that we understand how this host keyword of the mechanism works, we can use it to move the other

51
00:03:59,830 --> 00:04:01,110
styles that we have here.

52
00:04:01,240 --> 00:04:05,160
So we are going to take these styles and we are going to move them inside here.

53
00:04:05,170 --> 00:04:11,740
Our component stylesheet and we are going to replace here the occurrences, of course, shared by the

54
00:04:11,740 --> 00:04:13,360
colon host keyword.

55
00:04:13,570 --> 00:04:16,899
So now we are starting to organize our styles.

56
00:04:16,930 --> 00:04:23,560
Everything that belongs to a course cart is here inside the car component stylesheet.

57
00:04:23,620 --> 00:04:28,470
Let's now quickly summarize what we have learned about the host selected.

58
00:04:28,780 --> 00:04:34,300
So this is a special selector that is part of the angular view encapsulation mechanism.

59
00:04:34,300 --> 00:04:39,160
It allows us to target the host element of the component itself.

60
00:04:39,310 --> 00:04:46,150
So in the case of our course cart component, these hosts selected allows us to target the core scav

61
00:04:46,840 --> 00:04:55,080
element itself with styles from within our components stylesheet at runtime, the host styles are applied

62
00:04:55,090 --> 00:05:00,220
using the N, G, host, Desh, C1, C2, etc..

63
00:05:00,690 --> 00:05:05,560
Fire that uniquely identifies the component host element.

64
00:05:05,790 --> 00:05:11,760
This means that the host cells are, well, isolated, they will not affect the rest of the page, they

65
00:05:11,760 --> 00:05:15,550
will only affect the component host element.

66
00:05:15,750 --> 00:05:20,180
Let's not talk about another feature of angular view encapsulation.

67
00:05:20,190 --> 00:05:23,400
We are going to cover the engy, the modified.