All language subtitles for 14. Building Lists with NgFor

Well our application works pretty well right now.

We see three different cards and each one has some different content.

But right now the way our application is put together is just a little bit awkward.

Let me show you what I mean.

I'm gonna go back over to my app component class.

Here's my app component.

Inside there we've got that hosts array that are three different objects.

Now I want to show you a little change I'm going to make to this file at the very bottom of the post

array.

I'm going to find that last object for mountain biking.

I'm going to copy it and then duplicate it down to now inside of here if I zoom out really quickly you

can see very easily that I have or separate objects though I would imagine that my application should

now show or separate cards one for each post object inside of here.

But if I go back over to my browser I still only see three cards.

So why is that.

Well right now our app component template is hardcoded so it only ever shows three card components.

The first one is always going to read from the first element site posts and we've got the second and

the third so when I say that our application is a little bit awkward right now it is awkward because

if we start to add in more post objects our template is not going to update automatically and show those

additional posts.

Then this video we're going to take care of that we're going to make sure that for every post object

inside of our posts array we show a separate instance of the card component automatically.

So as that posts array right there grows or shrinks.

We're going to get an equivalent number of card components created.

Let me show you exactly how to do that.

Now as a quick reminder before we write any code I want you to recall that in the last application we

spoke about structural directives we said that structural directives are used to add or remove HDL elements.

These structured directive that we used was n g f though in order to make sure that our app component

template always shows the right number of card components we're going to use another structural directive

or the energy or directive let's write out some code back inside of my app component not h small file.

I'm going to delete everything inside of here and then I will replace it with one single instance of

app dash card then on that element I can give myself a little bit of space and I'm going to apply the

end G for directive to it was a star and G4 is going to be let post of those now on this element.

We're going to produce a number of cards equal to however many posts we have as we iterate through all

the posts inside that post array we're going to have access to a post variable inside of our template

we can access inside of this element right here and we could access all the different properties of

the post variable in the words the word post right here is like a reference to that post object and

then that one and then that one and so on that we're going to take that post object we're going to take

all the properties out of it and apply them to the card component in the same exact way that we are

doing.

Just a moment ago Now let's say title will come from post title.

Notice now I don't have to put in any index inside of here because we are iterating over just one single

object right now.

So it's simply post dot title and we'll also do our image your URL which is post image well we've got

our user name and our content

all right.

So let's save this.

We're gonna go back over to our browser and now we'll see that we have a number of cards being automatically

created equal to the number of post objects inside the posts array in particular at the very start of

this video I duplicated that last object.

Now down here at the bottom I see two copies of a mountain biking card in a row we can also say decrease

the number of posts we have for example if I delete all the objects inside of here except for one.

Now I've just got one post object if I save this file.

Now I only see one card but using the energy for DirecTV is really useful.

Anytime we need to iterate over an array of anything and show one component for every element inside

that array there are one or two quick things I want you to understand about energy for let's take a

quick pause come back the next video and I just want to clarify a couple of different things about it.