In this lecture, we are going to explore one more directive called the Energy for Directive.
It's a directive for looping through an element with an array.
It's common to perform this type of action.
If you think about it, a majority of apps are made up of lists, a list of users posts, products,
menu items, et cetera.
Everything we do revolves around lists as it stands.
If we want to output multiple posts.
We need to copy and paste the post component.
The problem compounds if we need to make adjustments to a specific post, it would be nice if the template
could output be current number of posts without updating it as often.
We can cleanly loop through an array by using the energy for directive.
This directive will loop through the array in the templates.
The element it is applying to will get output ID on each iteration before we get into this directive.
What type of directive do you think the Nji four directive is?
Is it an attribute or structural directive?
I'll give you a moment to think about it.
If your guest was a structural directive, you'd be correct.
We're modifying the documents elements, not its attributes, directives adding or removing elements
are considered structural directives.
For this demonstration, let's try looping through an array of images.
We're going to reuse our post component first.
Let's create an array.
Open the app component class file.
Below the image URL property.
We will create an array called images.
To keep it simple, the array will store the same set of images, we will reuse the image we're storing
in the image you are real property.
About three copies should do it.
Next, let's open the app template file.
On the post component, we're going to add the energy for DirecTV with the asterisk character.
As a reminder, we should always add the asterisk character before the name of the directive.
It's a shortcut for wrapping the element with the kng template element.
It's much cleaner.
Moving on the value of this directive is vastly different from other directives throughout this section.
We've been binding directives to properties or objects.
Unlike other directives, the new Ford Directive has a special set of syntax rules.
Let's write it first.
Then we will review the syntax inside the value of this directive.
We will add the following.
Let image of images.
This syntax can be broken into two pieces in the very beginning we've written let image, the let keyword
is similar to the let keyword in JavaScript.
It allows us to create a variable.
In this example, we are creating a variable called image.
Next, we need to provide an array.
We can specify the array by adding the of keyword.
Afterward, we can reference the array on each iteration.
Angular will assign the current element in the iteration to the image variable.
In this example, the image variable will hold the current post in the iteration.
We should update our component to accept the new data.
Currently, the component will throw an error.
Instead of passing in the image URL property, we can pass in the image variable.
The image variable is accessible in our loop.
This includes the component itself.
Therefore, we can pass on the image variable to the component.
It's much more efficient to use the energy for directive.
We don't have to copy and paste the directive multiple times.
Angular will always output the correct number of posts.
No more.
No less.
Before you verify or far loop is working, we should verify the image is unique.
At the moment, we all see the same image and caption.
Fortunately, we can access the index of the current loop iteration inside the Kng for DirecTV.
We will add the following Let I equals index.
We're creating another variable called AI.
It's being assigned to the index property from the energy for directive by storing the index in a variable.
We will be able to reference it inside our template.
Let's try outputting the index inside the caption.
We will add an expression for the AI variable.
Let's test our app in the browser.
As desired, the image has been rendered three times on each iteration.
The caption will contain the index of the current iteration since a raise or zero indexed, the first
image will have an index of zero.
We've successfully looped through the array.
We're finished with learning directives.
It's time to move on to the actual project.
I think you would agree with me in saying our project is starting to get cluttered.
If we're going to learn more features, we should be working with an actual project we can add to our
portfolio.
Let's get started with a new project in the next section.