Hello, everyone, and welcome back.
In these Lessel, we're going to present the angular energy for core directive, as we have seen on
the previous lesson, we have here several course cards displayed.
We have here a certain level of repetition in the template.
We have this free tax here and we are adding here, for example, the exact same custom event handler.
It would be much better to simply loop through a list of courses and apply only one core stack in our
template, especially because our data is already available in an array.
This will also simplify here our application component.
So let's start refactoring this and use the engie for DirecTV for presenting our list of courses.
The first thing that we are going to do is we are going to make the courses array available here.
We are going to make available to the template not only these free courses, but we are actually going
to present the complete list of courses.
So imagine what it would be if here we will have somewhere between seven and 10 courses here in this
template.
It will be very repetitive.
Let's then continue to refactor here.
Our component.
We have added here a variable called courses, which contains the complete courses list, and we can
now go ahead and remove these free variables that we were using here.
So we are no longer going to refer to the courses one by one with separate member variables.
Instead, what we're going to do is we are going to use the angular energy for structural directive
in order to loop through the list of courses.
And here is the syntax for Engy for we are going to start here with the style.
This is a shorthand syntax for structural that activates which we will be covering in detail later in
this course.
A structural directive such as the name implies allows us to change the structure of the page based
here on a JavaScript expression.
So in this case, we want to pass in here an expression that will loop through a list of courses.
The looping expression is identical to plain JavaScript.
This is the same expression that we would use when looping through a collection in TypeScript Engy four
is going to create the local course loop variable that is going to contain each of the courses being
looped.
Now we can take these variable here and we can pass it as the input of the course card system HTML element.
Let's then see energy for inaction after refreshing the application.
If we scroll down, we are going to see that not only we have here the first free cards, but notice
here there are more cards available.
So all the elements of the courses array are being displayed on the screen.
So we have here a directive that allows us to generate new components by looping through a data array
available at the level of our component if we click into the courses array available on the DB data
file.
So this is just a test data that we are using to build our program.
We are going to see that indeed all the courses in this file are being displayed here on the screen
besides the core iteration functionality and for also comes with some additional features.
Let's start with the first auxiliary feature, which is going to be the index feature.
So let's say that we want to add here no to the course.
We would like to number the courses from one up until the last sequential number of the course.
We can do that very easily in the following way.
We are going to here a semicolon after the letter of syntax and we are going to access here the index
built-In variable that is provided by Engy for DirecTV and we are actually going to rename it so that
we can use it easily here in our template.
We are going to pass in here an alternative name to our index, which is simply going to be called the
E variable.
Now we need to somehow pass the current index of the card to the cause itself and we're going to do
that using here a new input parameter that we are about to create.
We are going to call this index parameter carrer the index, then we are going to pass it the value
E plus one because e e zero based E starts at zero one, two, etc..
So we are adding here plus one, we move here into the card.
We are going to create here another input.
We are going to call it kind of index like we did in the previous template, and we're going to declare
it as being of Type No.
Next, we are going to go here to our template and just before here, the course description, we are
going to.
I have here the card index we are going to append here space and we are going to concatenate here the
course description, if we reload these, we are going to see that indeed we have here the numerical
value, one to free, etc. all the way up until then, Engie four also provides us a couple of extra
features.
So not only we have here access to the index of the current element that is being looped, but we also
have access to the information if this element is the first element on the list or not.
So first is a variable provided by Engy for that will be true only for the case of the first card,
and we can rename it using the syntax to something like, for example is first we can now use is first
to have a special style here to the first card of the least.
For example, in order to add a style to the first class card of the least, we are going to be using
the following template syntax.
We are going to continue to use the angular input properties syntax in square braces and we are going
to access the class variable of this DOM element.
The class property is going to contain the least of the asset classes apply to these HTML element.
So we are going to be adding here to the list of success classes of this element.
The class is that first, this is a Cyesis class that is going to arrive here, a top border only to
the first card of the list.
The class is available here and there.
The source assets folder we have here, styles, dot, cyesis, file, and if we open this file, we
are going to see that we have here a course candidate is first class that is applying here.
A couple of simple styles to our first class of the list.
Using this class, we can now use it here at the level of the template.
We are going to say that we want to apply that is first class in all cases of the list.
So we have to provide here a boolean expression that is going to be true if we want to apply the E first
Cyesis class to the cost curve.
And it should be false if we don't want to add this class to the element.
If we try this out now, we are going to see that the class is first is being added to all the elements
in the lists.
Instead of applying this first class to all the elements in the list, we would like each state to apply
this only to the first element.
So for that, we are going to use the EAS first boolean variable that we have available here.
And now this top border is only visible for the first card in the list in a very similar way to the
first variable.
We also have access to the last boolean variable and this variable works in a very similar way to E
first.
So let's apply here a class called E last, and this class will only be applied to the last element
of our list.
So it's very similar to the success that we have here.
But we are applying a bottom border this time around.
So if we try this out, can see that E first is still being applied here.
But if we now scroll down here to the bottom of the list, we are going to see that here at the end.
We have here the last card, of course, with the bottom border.
And if we expect the card element here using the chrome dev tools, we are going to see that indeed
the discourse card here is a success.
Class E last in a very similar way to the first and last variables.
We also have an even and odd variable pair.
Let's quickly be clear here, the variables.
So first we are going to declare even as is even and then we are going to declare all as is odd.
Now we have these two variables available and we can apply them here to our template in a very similar
way.
So we have a Cyesis class is even that is only going to be applied if there is even variable set to
true.
And the equivalent is going to be then for the Cyesis is all that is only going to be applied to an
element if the element is old.
So these two classes is even and is all are simply going to apply a different color background to each
of the cards.
Let's have a look at these courses, classes in action.
If we refresh the application, we can see that the even elements of our least have light gray background
while the all elements have here a light Sien background.
And these matches, the styles that we have here, as we can see, even elements are light gray and
all the elements are light skin, just like we see here on the screen.
And with these, we have covered all the auxillary features of engie for let's now cover another angular
color directive.
Where?
When.
How can we add or remove conditionally certain elements from the piece, we're going to be doing that
using the NGF core directive.