Hello, everyone, and welcome back.
Now that we have covered MGD and the host modifiers, let's talk about another feature of angular review
encapsulation.
Sometimes we just want to style our components depending on something that is happening outside the
component itself.
There are situations where, for example, we might want to change the background, of course, given
the presence of a certain theme that gets applied externally to the components.
So let's say that in certain situations we would like to make the background can have a light Solomont
color and we want to apply this only if the theme that is getting applied here to the template is the
Sulman theme.
So for that we would wrap the course Carveth element into a def containing this Sears's class.
The presence of this Cyesis class would imply that all conservatives have this background.
So let's try to see if this works.
We are going to take this Cyesis class, which is a theming class, and we're going to try to apply
it here to our course curve.
Let's find here in our template apparent element that contains our cost curve.
In this case, it's going to be here, the courses div.
So let's apply here the Solomon theme and see if this changes the background here of our components.
If we try this out, we are going to see that the background remains unchanged.
And let's switch here to a larger window to understand why we are going to inspect the styles that are
being created by ANGULAR.
And if we scroll down we are going to find here the Solman Feme style.
So as you can see, what is happening here is that because we defined our Sulman Feme selecter inside
the coursework component stylesheet, this style is being made specific to elements of the course Kerth
component templates.
So in order for this to work, we want to remove this part of The Selecter, the energy content dachsie,
one attribute that is making the Sulman feme specific to the core components.
Only now one way of doing it would be to use Engy deep here.
So if we use engy the pier at the beginning of the style, we are going to see that now.
The background is getting correctly applied and if we switch over here to our larger window and we expect
the style that we are getting applied here, we are going to see that indeed all the specificity of
the style has been removed.
We have applied in deep at the beginning of The Selecter.
So now this style is applicable to any course cards on the page.
So this means that this style is no longer specific to the Coast Guard component, which is a bit more
than what we want.
So if we switch here and we try to use this style here at the level of the course curve and we create
here a div that is going to contain both the test card and here our course card component and we apply
here the Sulman Feme not here to the courses div, but to these new parent, Dave.
What we are going to see is that the Sulman theme is now going to get applied to both our test cards
and to the Coast Guard component itself.
So this is a bit more than what we want.
We still want to somehow make this style specific to the component itself and have it not affect other
styles on the piece.
So if you are using Engy deep at the beginning of a style, we might as well just move these into the
global stylesheets.
The result is exactly the same.
It's still a good thing to know that we can always bypass completely the angular view encapsulation
mechanism this way.
But instead of using here MGD, let's use something else we are going to use instead the host contexts
cyesis modify it.
So this is angular specific and this can be applied to only a section here of our CSF selected.
So we are going to apply it here only to the Solomon feme part and not here to our course Carlat selector.
If we try this out we are going to see that this time around our Sulman Feme is only getting applied
here to our course curve component and not to our test captive, which is exactly what we wanted.
And these works because the part of our style inside the parenthesis of the host context modifier is
being made generic to the whole page.
But the second reminder part of our series says selected that comes after a host context is still being
made specific to the course CURTH component.
So as we can see, host context does indeed allow us to sell our component depending on the presence
of Cyesis styles outside the component itself.
And with this we have covered the host context selector now before.
Starting our new section on services in a deep dive in dependency injection, let's quickly wrap up
here the View encapsulation section.
Let's talk about the multiple modes that we have available for doing view encapsulation.