Hello, everyone, and welcome back in this lesson, we're going to talk about angular view encapsulation,
as we have seen so far, we can style and angular application the same way that we can style any other
angular application.
We have been styling here the course curve component using a few styles that we have available here
in our styles, not Cyesis file available here.
And there are the assets folder.
So here is a plain Cyesis file that allows us to apply commonly used styles such as, for example,
this one that is going to style here, our title or this one here that is going to style our course
description.
We also have here styles for the image, for the button, etc..
Now notice one thing.
Clearly all these styles here at the beginning of the file up until at least this part of the template,
but even below all these styles relate to the core care component itself.
So it would be great if we would have a way to associate these styles more closely to the component,
because right now this is on a separate general file without any specific link to the Coast Guard component
switching here to the component.
We see that besides the e-mail template, we also have here a style URLs property and we can pass it
and an array containing the names of the case files associated with this particular component.
In this case, we only have one file.
It's the cost curve component, that file that has here only a small amount of styles.
So it looks like angular forces, a way of associating styles to a component.
What we could do in order to reduce the size of our styles, that successful is to take these styles
and move them here.
But the question is, is there any difference between adding the styles here in the coarser components
useful or globally in the global stylesheet?
Let's see exactly what the difference is.
We are going to switch to our application component and we are going to have here a new test card div.
Let's now apply to this div one of the Xerces classes available in styles, not Cyesis.
So we're going to take this class here Krasker that is going to apply to our div and nice shadow around
it.
So here is the test Cardiff and here is the schedule.
Now take a look at what happens if I take this style, which is just a standard style that is applied
globally to everything on the page.
Now we will remove this style from the Styles NSWRL sheet and we're going to paste it into the course
CURTH component Cyesis file.
If we now refresh the application, we are going to see that now.
The style is still getting correctly applied here to the component, but the difference is now these
external div is no longer getting affected here by this style.
This means that ANGULAR is making this style specific to the component.
This style is only visible and can only be shown on the inside of a cautious component.
This style will not affect the rest of the page.
This feature is called View Encapsulation.
The styles are encapsulated and are only visible inside the particular crosscourt view.
As you can imagine, this style resolution mechanism is going to be very useful in large applications
where we have a lot of styles.
How do we want to prevent the multiple styles from interfering with each other?
Now, you might be thinking at this point, how does this mechanism exactly work?
Let's have a look at how this works in practice.
We're going to switch here to a larger window and inspect here our external div so we can see no styles
are getting applied here.
But if we select here our angular core, of course, and we select here the course element and we choose
the def that has here the course courtesy of this class, we are going to see that here on the style
panel.
We have the box shadow style correctly applied.
Now take a look here at the selector of the style.
We can see that the style has been modified.
Instead, we have here this extra attribute specify engie content that C1 this is the part that is making
this style here specific to only this specific component.
Let's have a look at how this works.
If we read here the style selector, we're going to see that this style can only be applied to an element
that contains an attribute that looks like this one.
So if you notice here in our course, our template, all the elements that belong to the template have
been added here.
This engie content dachsie, one special attribute we have here, the attributes apply to the course
care of itself to the title and to other elements here on the template, for example, to the course
category.
The way that this works is the.
Angular, when it's instantiating here our view, it's adding to every element of the cursor component,
the special attribute which is unique to this component, and it's the presence of this attribute that
is going to allow angular to create style similar to this one, each component will have a unique attribute
style identifier.
So if we switch over here, for example, to our application root component, we're going to see that,
for example, here the top menu has a very similar identifier applied to its elements, but this time
around ends in Dash C0 and not see one.
So each component is going to get here a sequential number that is going to be used to produce the special
attributes that is then going to be applied to every element of the template.
It's the special content attributes that are going to enable this default view encapsulation mechanism
that we are seeing here in action.
Now notice that some of the elements here of our template, such as, for example, the image itself,
are not receiving the special dash C1 attributes.
Instead, what we see here, if we open this course image template is a different identifier engie content
that to these means that just like the case here of our course curve end, just like the case here of
our application component, the image component received a unique attribute identifier that is then
going to be stamped in all its template elements.
From these, we can conclude that these THALHIMER apply to our course card is only visible in the component
itself, and this means that the style is not visible to its child components.
It's also not visible to its parent components.
The only part of the page that can see this tile here is any element here of the cursor component.
So any HTML element that we see here on this template, such as for example, this div the course title
or for example here the course category def, those are the elements that can be styled using styles
available here inside.
Of course, component dot Xerces.
As we could see, the elements projected with energy content are going to get stamped with the unique
attributes of the component where they were created in this case with the dash c0 unique attributes
of the application component.
So let's summarize what we have just learned about this default view encapsulation mechanism.
Angular.
It's going to take every component and it's going to create a unique attribute for it.
This is the attribute engy content that c0, C1, C2, etc. Then whenever Angular is instantiating the
template, it's going to take all the elements of the template and it's going to stamp them with this
special unique component attributes.
It's the presence of this attribute in the component elements that is going to allow ANGULAR to take
the components stylesheet and modify the styles in order to make them specific to the elements of the
component only.
Let's now continue to dive deeper into the topic of angular view encapsulation.
We are going to learn how to break the encapsulation if we need to.
And we are going to talk about the multiple types of view encapsulation that are available.