All language subtitles for 20. Context in Structural Directives

As I just mentioned in this video we're going to attempt to replace the energy for DirecTV with the

one that we just created.

If you take a really close look at the energy for DirecTV that we currently have you'll notice that

we are iterating over our list of images and we get access to that image variable but we never actually

reference it.

Nothing inside this energy for ever references that image variable.

The only reason we're using energy for in general is really just to get access to the index.

That's the only thing we really care about what we could do here is replace the entire energy floor

with the app times directive.

We just created.

We can say we want to create a number of allies equal to however many images we have inside of our images

array.

Let me show you how we would do that going to first get started by deleting the entire energy for and

I'll replace it with app times inside these double quotes.

We're going to provide the number of times that we want to render out this ally.

I want to show that ally a number of times equal to images that length this right here would work but

there's just one little problem.

You'll notice that inside of a lot of code we have inside of here or the markup.

We've got references to our index right now with at times we don't actually have the ability to communicate

which element or like what number of time we are iterating over.

We can very easily add that by making one small change back inside of our directive back inside of my

directive.

Remember when we called Create embedded V right here we passed in an empty object as the second argument.

This object right here is referred to as the context object.

We can add in some different properties inside of here.

It will make some different values accessible inside of our template through our directive.

By far it is easiest to just see an example of this rather than have me give you a verbal description.

So let me show you what we're going to do inside that context object.

I'm going to add in a key value pair of index equal to I remember I is going to be the number that we

are iterating over.

So is going to start off a zero then one two three and so on.

We're assigning that to a property of index when we pass in this context object.

It's going to make all the properties on this object available for aliasing inside of our directive.

You might recall what that aliasing aliasing thing really means.

Just a moment ago when we had energy for we were already making use of aliasing right here.

So when we make use of the energy for directive there are some variables that are exposed to us.

But to actually get a hold of them we have to write out this little additional let statement like the

one you see right there both the same thing as we start to try to get access to that context object

we're going to write out our directive and images at length and a semicolon and then right after that

we're gonna say let I equals and then the key or whatever property we want to assign to I from this

context object.

So in this case we want to assign a value coming from index.

I'll say I equals index like so now I'm going to save this I'm going to flip back over and believe it

or not hit still works.

We still got our little patch Anita up here.

Hundred percent equivalent behavior to what we had before.

It's clear that this definitely works.

But yeah like I said a little bit more confusing to create structural directives and attribute directives

thus you know if we ever want to expose any other properties we can very easily add them into this context

object by could for example say like color of red and then back inside I can set up another aliasing

right here so I could say let c equals color.

And now inside of here I can print out color excuse me not color but see I'll save that.

What makeover and now we're going to see read all over the place Oh we probably don't want that's going

to take that out.

It's just a quick little example.

I'm also going to move it back in the context object over here as well OK.

So that is structural directives though as I've said like three times now at the end of a day I really

expect that you're going to be creating custom attribute directives are more often than you create structural

directives mutually also with you directives are so incredibly similar to components that a lot of times

rather than creating a structural directive it might be easier to just create a separate component usually

that ends up being a little bit easier and a little bit more clear to other engineers as well.

OK.

So that's pretty much it for directives.

So we're going to pause right here and then move on to our next big topic in the next video.