All language subtitles for 4. Review on NgFor

Hopefully you had some success putting together a couple of different objects inside of here.

In total I've got one two three four different images.

Now we've got all these images inside of here.

I would encourage you to just double check and make sure that all these your cells look at least somewhat

similar.

Notice how all of mine are images not on Splash dot com FLASH PHOTO.

Reason I mentioned that is that you might very accidentally on one splash right click an image and then

click on copy link address.

Make sure that you didn't copy any link addresses.

Instead we want to always copy an image address.

All right.

So now that we've got all these images let's start to work on this actual page nation thing that's going

to be this kind of list of buttons that we want to display to the user to build something like this.

We're going to be making use of that energy for DirecTV that we've seen a couple of times.

Now I know that we've made use of the energy for DirecTV already.

So this is going to be a little bit of a review but don't worry we're going to throw in a couple of

extra features around energy for just see really understand what is going on behind the scenes.

We're going to run the energy for DirecTV over our list of images and for every image we're going to

try to print out an ally like the one we saw back over here on a bootstrapped documentation page.

Essentially we're just gonna write out a little bit of each team.

All right.

Now let's get to it inside of our app component template but here's my app component template there's

a lot of boilerplate inside of here right now.

I'm going to highlight everything and delete it and then I will replace it with the same structure of

HDL that we just saw over on the documentation going to first place a nav inside the NAB.

I'm going to place a well with the class of pageant nation

inside of that.

I'm going to display an ally on the fly.

I'll add a class of page dash item inside the fly.

Finally I'll display an anchor tag with a class of page dash link.

I'll close off the anchor tag OK.

So now as we start to write this stuff out we want to duplicate this ally.

We want to duplicate the ally and everything inside of it.

One time for each image object that we have inside of this images array but to do so we'll use that

energy for DirecTV.

We're going to find the element that we want to duplicate which in this case is the ally on there all

add on star and G4 let image of images right now.

Really just trying to build out the list of links that a user can click on inside the anchor tag.

As we just saw inside that bootstrap documentation we really want to show something like say one or

two or three or four that the user understands that there are like four images that they can possibly

click on but right away that kind of presents a problem for us by default.

The energy for DirecTV is going to iterate over this array of objects that we have right now.

We really just have access to each image object that we could print out something about the image but

not necessarily which index this image is at.

But to get around this we're going to add in just a little bit of extra syntax to the energy for DirecTV

at the very end of the left image for images statement to put in a semicolon.

Then I'll say let I equals index like so it turns out that there are a couple of other variables that

are accessible to us when we make use of the energy for DirecTV.

They allow us to look up things like say the index we are currently iterating over.

We can also use this kind of aliasing syntax that you see right here.

That's what this is referred to aliasing.

You get access to a Boolean that tells us whether or not we are iterating over the first element in

the array.

The last element whether or not this is an even numbered index or an odd numbered index and so on again

there are a couple of extra variables that are kind of floating around here behind the scenes.

We can get access to using this kind of aliasing syntax now inside the anchor tag.

I can print up that variable that I just alias which is I inside there.

I'll put in I like so I'll then save this going to flip back over and there we go.

So I've got 0 1 2 and 3 being displayed because I have or different images total.

Now of course a user doesn't really understand that our arrays are zero indexed.

Rather than showing 0 1 2 3 we should really show 1 2 3 4.

But to do so we could just go back over to our interpolation right here and add in I plus 1 if we now

save that we see one two three four very good.

All right.

So again just a quick review of the energy for DirecTV.

Let's take a pause right here.

When come back the next video we're gonna start to take a look at some more complex directives.