1
00:00:03,760 --> 00:00:09,910
Hello, everyone, and welcome back in this lesson, we're going to talk about angular view encapsulation,

2
00:00:09,940 --> 00:00:15,880
as we have seen so far, we can style and angular application the same way that we can style any other

3
00:00:15,880 --> 00:00:17,170
angular application.

4
00:00:17,180 --> 00:00:23,260
We have been styling here the course curve component using a few styles that we have available here

5
00:00:23,260 --> 00:00:26,650
in our styles, not Cyesis file available here.

6
00:00:26,650 --> 00:00:28,430
And there are the assets folder.

7
00:00:28,540 --> 00:00:34,930
So here is a plain Cyesis file that allows us to apply commonly used styles such as, for example,

8
00:00:34,960 --> 00:00:41,620
this one that is going to style here, our title or this one here that is going to style our course

9
00:00:41,620 --> 00:00:42,460
description.

10
00:00:42,490 --> 00:00:46,430
We also have here styles for the image, for the button, etc..

11
00:00:46,540 --> 00:00:47,710
Now notice one thing.

12
00:00:47,860 --> 00:00:55,060
Clearly all these styles here at the beginning of the file up until at least this part of the template,

13
00:00:55,060 --> 00:01:00,360
but even below all these styles relate to the core care component itself.

14
00:01:00,370 --> 00:01:07,090
So it would be great if we would have a way to associate these styles more closely to the component,

15
00:01:07,100 --> 00:01:13,860
because right now this is on a separate general file without any specific link to the Coast Guard component

16
00:01:13,960 --> 00:01:15,460
switching here to the component.

17
00:01:15,460 --> 00:01:22,810
We see that besides the e-mail template, we also have here a style URLs property and we can pass it

18
00:01:22,810 --> 00:01:29,230
and an array containing the names of the case files associated with this particular component.

19
00:01:29,290 --> 00:01:31,150
In this case, we only have one file.

20
00:01:31,150 --> 00:01:37,330
It's the cost curve component, that file that has here only a small amount of styles.

21
00:01:37,330 --> 00:01:42,540
So it looks like angular forces, a way of associating styles to a component.

22
00:01:42,730 --> 00:01:48,400
What we could do in order to reduce the size of our styles, that successful is to take these styles

23
00:01:48,400 --> 00:01:49,620
and move them here.

24
00:01:49,720 --> 00:01:56,340
But the question is, is there any difference between adding the styles here in the coarser components

25
00:01:56,360 --> 00:01:59,700
useful or globally in the global stylesheet?

26
00:01:59,800 --> 00:02:02,560
Let's see exactly what the difference is.

27
00:02:02,560 --> 00:02:08,729
We are going to switch to our application component and we are going to have here a new test card div.

28
00:02:08,740 --> 00:02:14,740
Let's now apply to this div one of the Xerces classes available in styles, not Cyesis.

29
00:02:14,770 --> 00:02:21,130
So we're going to take this class here Krasker that is going to apply to our div and nice shadow around

30
00:02:21,130 --> 00:02:21,240
it.

31
00:02:21,250 --> 00:02:24,670
So here is the test Cardiff and here is the schedule.

32
00:02:24,700 --> 00:02:30,970
Now take a look at what happens if I take this style, which is just a standard style that is applied

33
00:02:30,970 --> 00:02:33,030
globally to everything on the page.

34
00:02:33,160 --> 00:02:39,090
Now we will remove this style from the Styles NSWRL sheet and we're going to paste it into the course

35
00:02:39,100 --> 00:02:41,080
CURTH component Cyesis file.

36
00:02:41,230 --> 00:02:44,620
If we now refresh the application, we are going to see that now.

37
00:02:44,620 --> 00:02:50,620
The style is still getting correctly applied here to the component, but the difference is now these

38
00:02:50,620 --> 00:02:54,930
external div is no longer getting affected here by this style.

39
00:02:55,060 --> 00:02:59,610
This means that ANGULAR is making this style specific to the component.

40
00:02:59,650 --> 00:03:07,060
This style is only visible and can only be shown on the inside of a cautious component.

41
00:03:07,090 --> 00:03:10,230
This style will not affect the rest of the page.

42
00:03:10,480 --> 00:03:13,900
This feature is called View Encapsulation.

43
00:03:13,900 --> 00:03:20,440
The styles are encapsulated and are only visible inside the particular crosscourt view.

44
00:03:20,440 --> 00:03:26,230
As you can imagine, this style resolution mechanism is going to be very useful in large applications

45
00:03:26,230 --> 00:03:28,120
where we have a lot of styles.

46
00:03:28,120 --> 00:03:32,530
How do we want to prevent the multiple styles from interfering with each other?

47
00:03:32,650 --> 00:03:37,150
Now, you might be thinking at this point, how does this mechanism exactly work?

48
00:03:37,420 --> 00:03:39,550
Let's have a look at how this works in practice.

49
00:03:39,550 --> 00:03:46,480
We're going to switch here to a larger window and inspect here our external div so we can see no styles

50
00:03:46,480 --> 00:03:47,830
are getting applied here.

51
00:03:47,830 --> 00:03:55,810
But if we select here our angular core, of course, and we select here the course element and we choose

52
00:03:55,810 --> 00:04:01,030
the def that has here the course courtesy of this class, we are going to see that here on the style

53
00:04:01,030 --> 00:04:01,600
panel.

54
00:04:01,600 --> 00:04:04,880
We have the box shadow style correctly applied.

55
00:04:04,990 --> 00:04:08,140
Now take a look here at the selector of the style.

56
00:04:08,140 --> 00:04:10,840
We can see that the style has been modified.

57
00:04:11,090 --> 00:04:20,079
Instead, we have here this extra attribute specify engie content that C1 this is the part that is making

58
00:04:20,079 --> 00:04:24,930
this style here specific to only this specific component.

59
00:04:24,950 --> 00:04:26,650
Let's have a look at how this works.

60
00:04:26,920 --> 00:04:33,130
If we read here the style selector, we're going to see that this style can only be applied to an element

61
00:04:33,130 --> 00:04:36,600
that contains an attribute that looks like this one.

62
00:04:36,640 --> 00:04:43,990
So if you notice here in our course, our template, all the elements that belong to the template have

63
00:04:43,990 --> 00:04:45,040
been added here.

64
00:04:45,040 --> 00:04:50,970
This engie content dachsie, one special attribute we have here, the attributes apply to the course

65
00:04:50,980 --> 00:04:57,730
care of itself to the title and to other elements here on the template, for example, to the course

66
00:04:57,730 --> 00:04:58,420
category.

67
00:04:58,600 --> 00:05:00,520
The way that this works is the.

68
00:05:00,640 --> 00:05:08,090
Angular, when it's instantiating here our view, it's adding to every element of the cursor component,

69
00:05:08,290 --> 00:05:14,470
the special attribute which is unique to this component, and it's the presence of this attribute that

70
00:05:14,470 --> 00:05:21,280
is going to allow angular to create style similar to this one, each component will have a unique attribute

71
00:05:21,280 --> 00:05:22,540
style identifier.

72
00:05:22,660 --> 00:05:28,240
So if we switch over here, for example, to our application root component, we're going to see that,

73
00:05:28,240 --> 00:05:35,140
for example, here the top menu has a very similar identifier applied to its elements, but this time

74
00:05:35,140 --> 00:05:39,410
around ends in Dash C0 and not see one.

75
00:05:39,430 --> 00:05:45,790
So each component is going to get here a sequential number that is going to be used to produce the special

76
00:05:45,790 --> 00:05:50,260
attributes that is then going to be applied to every element of the template.

77
00:05:50,290 --> 00:05:56,440
It's the special content attributes that are going to enable this default view encapsulation mechanism

78
00:05:56,440 --> 00:05:58,360
that we are seeing here in action.

79
00:05:58,510 --> 00:06:04,840
Now notice that some of the elements here of our template, such as, for example, the image itself,

80
00:06:04,840 --> 00:06:08,710
are not receiving the special dash C1 attributes.

81
00:06:08,740 --> 00:06:16,090
Instead, what we see here, if we open this course image template is a different identifier engie content

82
00:06:16,090 --> 00:06:23,950
that to these means that just like the case here of our course curve end, just like the case here of

83
00:06:23,950 --> 00:06:31,570
our application component, the image component received a unique attribute identifier that is then

84
00:06:31,570 --> 00:06:34,780
going to be stamped in all its template elements.

85
00:06:34,960 --> 00:06:42,100
From these, we can conclude that these THALHIMER apply to our course card is only visible in the component

86
00:06:42,100 --> 00:06:47,750
itself, and this means that the style is not visible to its child components.

87
00:06:47,770 --> 00:06:51,060
It's also not visible to its parent components.

88
00:06:51,220 --> 00:06:58,180
The only part of the page that can see this tile here is any element here of the cursor component.

89
00:06:58,220 --> 00:07:04,840
So any HTML element that we see here on this template, such as for example, this div the course title

90
00:07:04,870 --> 00:07:11,920
or for example here the course category def, those are the elements that can be styled using styles

91
00:07:11,920 --> 00:07:13,460
available here inside.

92
00:07:13,460 --> 00:07:15,520
Of course, component dot Xerces.

93
00:07:15,520 --> 00:07:22,120
As we could see, the elements projected with energy content are going to get stamped with the unique

94
00:07:22,120 --> 00:07:29,260
attributes of the component where they were created in this case with the dash c0 unique attributes

95
00:07:29,260 --> 00:07:31,070
of the application component.

96
00:07:31,240 --> 00:07:36,700
So let's summarize what we have just learned about this default view encapsulation mechanism.

97
00:07:36,880 --> 00:07:37,360
Angular.

98
00:07:37,360 --> 00:07:42,540
It's going to take every component and it's going to create a unique attribute for it.

99
00:07:42,610 --> 00:07:51,250
This is the attribute engy content that c0, C1, C2, etc. Then whenever Angular is instantiating the

100
00:07:51,250 --> 00:07:57,730
template, it's going to take all the elements of the template and it's going to stamp them with this

101
00:07:57,730 --> 00:08:00,360
special unique component attributes.

102
00:08:00,580 --> 00:08:06,310
It's the presence of this attribute in the component elements that is going to allow ANGULAR to take

103
00:08:06,310 --> 00:08:12,760
the components stylesheet and modify the styles in order to make them specific to the elements of the

104
00:08:12,760 --> 00:08:14,030
component only.

105
00:08:14,200 --> 00:08:19,020
Let's now continue to dive deeper into the topic of angular view encapsulation.

106
00:08:19,030 --> 00:08:22,690
We are going to learn how to break the encapsulation if we need to.

107
00:08:22,870 --> 00:08:28,120
And we are going to talk about the multiple types of view encapsulation that are available.