All language subtitles for 2. For Loop

Hello, welcome back in the annual lecture in the previous while we have talked about the data, how

you can specify the data in your component and how you can use it in your template.

You know, this lecture will take a look on the items.

We have created our menu items, which specifies that five objects.

So what we want to do now, we want to display them.

OK, let's begin.

Let's see, I love Paris.

You remember everybody's playing them down here, but it's not the goat.

I will remove them, notify.

Let's notice the data itself, menu items, as I told many times before.

Just five objects specified text property.

If it is a text we want to display, that's the main part we want to display in our template.

OK, for this whatever you want to do.

We would like to create only one element, so let's remove all of the remaining monsters.

Leave here one element reporter register inside and what we want to do.

We want to replicate it five times and to dynamically specify the value inside from your menu item.

So what I want to display here is exactly this first element to the display home.

The second element will display about that element will display fake you and so on and so on.

OK.

That's what I would like to achieve.

And to hear a new term this term is called die or active.

Directive directives are special attributes you can place on your elements, on your team elements.

And with the help of them, you can manipulate the DOM document.

Object model basically can manipulate as as you are entering your HTML the way you are entering your

HTML.

OK, so just a directive to keep in mind the special attributes you can place on the element.

And if you're using one here, let's get you some spacing.

Let's plays a class on their separate line.

I will do it like this.

OK, so we have only one element and able to use here directive called V Dash for like this.

You can see right there is the element or a template block multiple times based on the source data.

To the V4 will specify our source data menu items.

That's good about it would like to also access the single item in the iteration.

You can do it like this before menu items.

You will specify the item as you want to call it, which will be the value you are iterating.

Simply call it item in menu items.

All right, guys, so this item will hold the value of your menu items so as you will be rendering the

elements.

In the first iteration, this volte text home will be an item in the second iteration of old text about

will be the item and so on and so on.

OK.

OK, I can see the squiggly lines, we'll worry about them.

It is just a noting that they are missing.

Somebody requires proper required values to specify.

OK.

The other they're active here is called V.

Bind V does bind like this, and we'll specify here a key like the V Bind column key and it will pass

here key, which should be unique, unique value.

It should be based on something unique.

As in this case, we have only five items that they are holding, the texts or the unique value of each

item is the text itself.

OK, so as a key, we'll specify here item dot text.

OK, and that's your key here.

It's called DirecTV, and you're specifying the key as the value here.

OK.

Then they even understand DirecTV, as will be creating all the components that will be passing the

values around you will see is very simple.

Then another Obama.

Delhi, which is the link that I would like to link to.

Terrible Vida v bind a normal element as we have on the element evil does a v by a draft and now you

can provide your value dynamically.

So let's say the value will be here.

Item Dot Link.

As you see, we don't have any links here on the text that we cannot access the link because we don't

have it, so let's specify on each item link.

Let's see a link here will be linking to flesh on the empty path.

Let's see a link.

Here will be the value of this discussion about it.

Let's say this will be a close link.

There'll be slash if a Q same, continue without looking at energy star slash.

Log in a.

OK, and the last one, the link.

Let's register.

OK, perfect, so now let's save you, let's take a look here.

It's planning because the are already specifying the bind to item link, but we have here also one more

additional h drive, so they need to remove the additional Obama.

OK, and as you're iterating, you have access to this item.

As I mentioned, we need to display also this item inside of the element as we have how it could be

for a home logging and so on.

But now it is valuable to go from the item to text because we have access to it.

Nobody will save it, hopefully everything should work for you, go to your browser and uh, yeah,

you can see you can see here every item, but now dynamically rendered out and I can click on this and

I will go to about page here.

It's about you can see fake, useless logging slash register and everything is working as we as we want.

OK, guys.

So just to recapitulate more small parts here we are using here a V for directives.

Directives are used for manipulation of your HDL, as in this case you can see instead of displaying

one element be displayed five depending on the number of menu items in the V for the value of their

menu item.

This value these value are stored into the item variable in the duration of your for loop.

You can access this item here.

You can call it as you want.

You can call it a file.

You can you can call it how it doesn't even make sense, right?

You can call it to my variable.

OK, but then you need to change.

These are the things you need to call.

You need to access the text under your my variable and link under my variable link and so on here.

But of course, in this case, should be menu, right?

So let's actually just just item so that we are providing here another clarity binding kind of al-dhari

coverage directive called V Bind, where we are passing the key value, which will be the item text,

the text itself and the HIV test provider attribute as we had it before, but it will be dynamically

accessed from there from the item link, which is telling here.

As you notice, whenever you are providing directives, the quotation here you are not providing actual

string of value.

Here is not actually think value, but it's interpolated value value from the variable item value accessing

the tax property.

If you want to provide your old.

Rob Stringer value additional set of the single brackets, and then you will probably like this, but

you will see its error because of you for directive key should be should be unique.

OK, OK.

You can hear if you can provide us as that is.

OK, but of course, we don't want to here, one string of will repeat for every item, but in every

iteration we would like to get higher dynamic value from each item.

OK, and the same with item text, another thing we can simplify here, since the directive are so heavily

used, especially this one here binds.

We don't need to specify actually bind the keyboard we can fight and we can simply specify here only

column key and here column a trip and the View Jazz Villa automatically fill it up for you.

OK, so we just need to specify your key and the age of it's much nicer to write it like this.

We can save it.

We can go back here and refresh and everything will work as before.

So.

That's how did you create V for how you can create iterations in our time in your template to render

multiple items and the questions we keep asking, and I hope to see you in the next lecture.

Thank you for watching.

Cheers.