Hello, everyone, and welcome back.
In this lesson, we're going to dive deeper into the angular default view encapsulation mechanism.
We are going to cover the special access modifiers, host, host context and Engy Deep.
Let's have a look here at what other styles we can move from our generic stylesheet into our component
stylesheet.
If you notice, we have here other styles, such as, for example, the title that we can very easily
move inside the component stylesheet.
So if we try this out, we are going to see that the title is still being styled correctly.
But now notice the following.
We also have here other styles that are styling, not something inside the components template, but
these styles are styling the component element itself.
We have here a reference to the core element and not to the core Cyesis class, starting with the dots.
So this is a completely different selecter that is targeting the e-mail element itself.
We have here other styles that are very similar.
We are going to group them together so that we can clearly identify them.
So these styles are clearly styling the e-mail element.
Let's not try to take these elements styles and move them here inside the component style sheet.
So if we try this out, we are going to see that nothing gets changed on the screen.
But if we inspect the screen here using our chrome dev tools in a larger window, we are going to see
that our core element no longer has here the display block property set.
So the style is not working.
Moving back to the component stylesheet, we can see that what's happening here is that these styles
are only visible inside the element itself.
And here we want to style the element and not something inside the element.
We want to style the host element of the component in order to style the host element.
We are going to need these special Syntex.
We cannot reference the element by name here, but instead we are going to use the colon host Syntex.
This is a special keyword introduced by the angular view encapsulation mechanism that is going to allow
us to target the host element of a component.
So if we now reload our application and we expect it here on the larger window, we are going to see
that this time around our style is being correctly applied.
And notice here how this is being.
Then we see that the style is getting applied via an attribute which is different than the attribute
that we were using before.
So before we had our styles applied with this energy content, that one special property that is unique
to the template elements of the course curve component.
However, that's not the property that we are using to sell the host element.
What we are using is the special property engy host that C1.
If you have a look here at the you are going to see that only the host element of the course component
has this properly applied to it.
The child elements of these components, however, don't have the special properties.
This is only applied to the host element.
And again, every component has its own unique host attribute property.
If we shake here our application route, we are going to see the unique identifier for the host element
is going to be that C0.
So if we will have here multiple instances, of course, cards on this page, they will all have the
same property.
Engle's Desh C1.
This is the property that allows us to create styles that are applied to the course host element.
Now that we understand how this host keyword of the mechanism works, we can use it to move the other
styles that we have here.
So we are going to take these styles and we are going to move them inside here.
Our component stylesheet and we are going to replace here the occurrences, of course, shared by the
colon host keyword.
So now we are starting to organize our styles.
Everything that belongs to a course cart is here inside the car component stylesheet.
Let's now quickly summarize what we have learned about the host selected.
So this is a special selector that is part of the angular view encapsulation mechanism.
It allows us to target the host element of the component itself.
So in the case of our course cart component, these hosts selected allows us to target the core scav
element itself with styles from within our components stylesheet at runtime, the host styles are applied
using the N, G, host, Desh, C1, C2, etc..
Fire that uniquely identifies the component host element.
This means that the host cells are, well, isolated, they will not affect the rest of the page, they
will only affect the component host element.
Let's not talk about another feature of angular view encapsulation.
We are going to cover the engy, the modified.