Hello, everyone, and welcome back in this lesson, we're going to cover the engy container angular
core directive.
So far we have been using several angular structural directives, such as, for example, NGF or Engy
Switch case.
Now, so far we have here cleared parent elements onto which to apply these directives.
This is not always the case.
We might find ourselves in a situation where, for example, our component does not have a top level
element, such as, for example, the case here where we have a roofing wrapped around course Curth.
It might happen that the component does not have one single parent element onto which we can apply our
NGF in a similar way.
Here in our engie switch example, we have here a parent, d'Hiv Anta, which we have a play engie,
which we might not always be in the situation where we have a single parent element.
We might even have the situation where we want to have here in save an energy switch case.
Not only one element, meaning one deve with Gless category, but multiple elements inside a switch
case.
And there is not one single parent element that wraps the complete case.
If we find ourselves in that situation, we might be tempted to add an extra divx to our component without
any need for it other than to have a place to apply our NGF, something like this.
We would take him here the if clause.
We would apply it here to this parent container and inside it we will add here the multiple elements
which are part of our component.
Now we don't have to create these extra wrapper elements just to apply a structural directive.
We can instead use the energy that contain that directive that is available via angular core.
So this is the wrapping container element onto which we can apply a structural directive so we can always
use energy containers as sort of a template hook for applying this type of directives.
The same goes here at the level of energy switch.
So if by some reason we don't have here a div onto which to apply our energy switch directive, we can
also add here an energy container.
We can apply our energy switch directly here in our energy container and in save energy container.
We can place anything that we want.
So any value template element, the same goes here at the level of the category classes.
In this case, we can apply here our energy switch case directive directly here in the category div,
but we can alternatively apply our energy switch case close on top of an energy container.
Let's for example, move the energy switch case close here to our energy container.
And let's move here to the beginner category inside our container and let's try this out to see if everything
is working still just like before.
So as you can see, that is indeed the case.
Our functionality is still working as expected.
So if you ever find yourself in a situation where you don't have any convenient place to apply a strict
directive, instead of creating an extra element such as a div just for being able to apply that directive,
let's using stealth energy container, because these will not create extra DOM elements and this will
help to keep our PS more lightweight.
And with these we have covered the angular core energy container directive.
We are now going to introduce a new angular feature, Angular Pipes.