All language subtitles for 15. Two Notes on NgFor3

We just added in the energy for structural directive right here to iterate over every post inside of

our posts array and this video.

Like I said I just want to clarify one or two quick things about this.

First off whatever we are iterating over right here is gonna be a direct reference to a property tied

to our component class.

But in this case we're inside of our app component.

So right there I can place any reference to any property that I have defined inside of my app components

that can be either a property like post right here or we can also refer to different methods as well.

For example when I say let post a post I could also do of get post but we had a method to get posts

like so if we had a method called get post that returned an array of objects you could call that right

here and then iterate over every post that we get back.

In this case we don't have a method called get posts we're going to instead iterate over that property

called Post.

Now the next thing I want to mention here is this is something that's gonna be You'll just a little

bit awkward is how the energy for directive kind of gives you access to that post variable right there.

In particular I want to point out how the syntax you see right here is kind of different than how a

traditional form of loop works inside a javascript.

Of course the syntax is very different.

Let me just see what I mean I'm gonna open up a new file really quickly.

You do not have to create a new file here.

I just want to give you an example of a for of loop inside this new file.

I'm going to create a post Reagan.

I'll give the first one the title of the tree and then a title of snowy mountain and whatever else.

Now if I wanted to iterate over this array of objects I could do so with normal javascript using a for

loop and it would look like this it would be for that host of hosts.

You'll notice that the content right there is just about identical while 100 percent identical to what

we saw inside of the energy for DirecTV.

Now what's really awkward here is that that gives us access to a host variable and we can only access

that variable inside of these curly braces though inside the curly braces I could do something like

console dot log post dot title miss right here.

Hundred percent valid code but there's no form of a for loop in which I could add like after the left

post a post or I could say something like I don't know poster like console log right there right outside

of the curly braces.

Right this is 100 percent invalid syntax.

This is not a thing at all.

We only get access to the post variable inside of those curly braces.

And so this is very different than what we are seeing right here with the energy for DirecTV.

If the energy for DirecTV worked in the same kind of style as a traditional four of lube then we would

only be able to access that post variable like inside of that element.

Like right here but that is not the case when we make use of energy for we get the post variable and

we can refer to that variable on the same element.

Like right here and right here and right here and so on that we are applying the energy for DirecTV

too.

Now I don't know about you but for me that just feels a little bit weird because the behavior is very

different as we just discussed than a traditional four of loop begin with a terminal for a loop.

We only access that iterator variable inside the curly braces and if that was the same thing with energy

for that would mean that we can only access post inside this thing like right here.

But again that is not the case we can access that iterator variable on the element that we are applying

the energy for DirecTV to as well okay.

So let's just two quick things I wanted to mention about the energy for DirecTV.

Just some stuff to kind of clarify what's going on though now that we've got all this stuff put together.

Let's take a pause right here.

We're gonna come back the next video and there's one last quick thing on a fix up inside of application.