Hello, everyone, and welcome back.
In this lesson, we're going to introduce the Angular Energy Switch Core Directive.
So as we have seen, we can conditionally add or remove elements to a page if using the NGF core, their
active energy is useful in the case when we want to add the element to the page, depending on a condition
or we want to remove it.
So there are only two possibilities.
But there are many other cases where we have more than these two possibilities.
For example, here in the case of the category property of its course, let's say that we want to add
here a label that identifies if the course is beginner, intermediate or advanced.
Let's see how Energy Switch is going to help us to create here a category label just above here, the
view course button.
So we are going to go here to our template and here just below the course description.
We are going to add here a new div and we are going to add the science class course category.
Now, inside this container, we are going to add the category itself.
The category is going to be simply a div, which is going to have the class category.
Let's add here the beginner category, for example.
So if we now try this out, we are going to see that the beginner tag is being added to all the courses.
Instead of adding these to every course, we want to add these depending on the value of the course
category.
We can do that in the following way.
We are going to apply here the energy switch directive.
So this is going to work in a similar way to a JavaScript switch statement.
We are going to choose the expression onto which we want to switch on, which is going to be the course
category itself.
And then depending on the value of the category, we are going to show or not here the beginner category.
So one of the cases that we want to show is indeed the beginner category, and we are going to identify
that via a case clause.
We are going to adhere to the engy switch case structural directive here with the Asterisk Syntex.
This case is going to be considered active if the value of this expression, because that category is
identical to begin.
So in this case, we are going to be showing this label.
If we not try this out, we are going to see that only the courses that are beginner courses have the
beginning of tag as expected.
We also want to add here, for example, the case of intermediate courses.
So we are going to have here the matching expression intermediate and we are going to fix here our label.
So if we try this out, we are going to see that now certain courses get applied here, the intermediate
tag and the same goes for the advanced tag.
So we want to add here a further possibility, advanced courses.
So if we try this out, we are going to see that in the certain courses now have here the advanced tag
that we also want to cover the possibility when the course category expression does not match any of
the known cases.
In that case, we want to write the category all levels.
We can do that by applying the following directive, the end speech, default structural directive.
So in order to see that all levels, we are going to have to go here to our DV data file that contains
the data that we are displaying.
And let's, for example, go to the first course and remove here the category property.
So if we now try this out, we are going to see that indeed we have here the all level stack displayed
as expected.
So as you can see, the main difference between Engy Switch and NGF is that here with Engy Switch,
we can cover multiple alternative cases very easily and we can even provide the default keys.
This is unlike NGF, where we really only have two possibilities.
And with this we have covered the multiple options available with Engy Switch.
Let's not talk about another very commonly used angular core directive.
Engy contain it.