Hello, everyone, and welcome back.
Let's now continue this refactoring process and see what other features the angular view encapsulation
mechanism gives us.
We are going to try to refactor the course, description style that we have here that is going to stall
this block of text here below the picture.
So if we try to take this tile, which is very similar to other styles that we have already moved and
we placed it in here inside the component, stylesheet notice.
Well, that when we reload the application, it's clear that at least some of the styling is not correctly
applied here.
We were limiting the maximum width of this description that is no longer occurring.
If we switch here to a larger window and we expect here the course description, we are going to see
that no specific styles are being applied to it.
So these tiles now are not working.
And if we remember before how the styles were being applied, we are going to understand why this style
is not working.
So all these styles that we have created here are being made specific to this particular component template.
So if we have a look here at the header of our page, let's take, for example, these special style
applied here to the cost curve.
And we open here the style tag containing all the styling that is generated by HENGGELER based on our
component cyesis stylesheet.
If we scroll down, we are going to find here the style for the course description.
Here it is.
We are applying the course car description that has excess class, of course curved.
And here the energy content see one unique identifier that we were seeing before.
So this is getting applied to all the elements of the car template and you are applying something similar
here to our course description container that contains here the course description.
Notice that we are trying to apply here the same unique attribute that identifies elements belonging
to the core skirt component.
The problem is that the course description div that we have here does not have that special attribute.
This element here, the course description div instead of having the special attribute Desh C1, which
is the one that is associated to course car components, we have here the attribute C0, which is the
attribute associated here to our application root component.
Take a look here.
The test car has the attributes c0 so this means that from the point of view of angular discourse description
div that we have here is considered an element of the application template, and that's because this
course description was defined here at the level of the application component.
So this is being passed on to the course car component via content projection using the energy content
feature.
So we curl's course description is considered an element of the application component template.
In order to have this tile applied, what we can do is we could remove this from these stylesheet and
we could try to apply it here to the application component stylesheet.
Let's quickly open here this application component stylesheet.
And if we apply here the course description styling in principle, this should work.
We will have to remove this item here because there is no course cards on the application component
template.
Now have a look.
The style is again being correctly applied, but this is not what we want.
We have here a situation where we have a style that belongs to the course cart component here on the
application component stylesheet.
We need to find a way to move the style where it belongs, which is inside the course stylesheet.
This is clearly a style related to Kaskowitz.
So in this situation, what we want to do is we want to be able to style elements that were provided
to our component by content prosection.
These elements are not part of the course car component itself, but still we want to tell them nevertheless.
And in order to do that, we need to bypass the angular view encapsulation mechanism.
In this case, we are going to say that inside the causative we are going to target any course description
element that is inside of it independently if it belongs to the car scarred component or if it does
not.
So in order to bypass the angular view encapsulation mechanism, we are going to be using the angular
engy deep feature.
Now, take a look here at the course description.
If we reload the application now, the description is going to be justified here.
We are no longer having a long description that almost touches the border and if we switch here to a
larger window, we are going to refresh here our application.
And we are going to confirm that, indeed, our course description style is getting correctly applied,
have a look at it with the dev tools, we can see that now our style is being correctly applied as expected.
Notice that the reason why this style now works is because these special attributes engie contain dachsie
one which marks the template elements that are unique to the course template is not getting applied
here anymore to the course description part.
So using engy deep here in our stylesheet at this point in our style selecter is effectively saying
that everything that comes after engy dip should not be made specific to the template by appending here
these special attributes.
Let's now quickly summarize everything that we have learned about Engy Deep Modifier.
So this is a way of bypassing the angular view encapsulation mechanism.
Whenever we apply engy deep to our style, the parts of the selector after Engy Deep is no longer going
to be made specific to a particular component.
The part before Gnjidic is still going to be made specific to that component by applying the special
engy content Dash, 081, etc. property.
A typical use case for Engy Deep is when we want to style elements that we have received in our component
via content projection.
And with this, we have completed our coverage of Engy Deep.
Let's not talk about another angle or view.
Encapsulation modifier.
The host context modifier.