All language subtitles for 19. Custom Structural Directives

In this video we're going to take a look at how to build our own custom structural directive.

Remember examples of structural directive are energy for and energy.

If these are directives that change the structure of our HCM out let me first tell you about the purpose

of the directive.

We're going to create at the very bottom of this template file.

I can give you a very quick example.

I'm gonna write out a U L with an ally inside of it inside the ally.

I'll say something like Hi there.

I want to make a directive and we're gonna call it something like app times that's going to take in

a number then whatever number we provide right there.

This directive is going to take a look at the contents of the element of the contents of the UL.

In this case it's the ally that's going to duplicate the contents five times over that we would end

up with something like this.

When this actually runs inside the browser it's pretty simple and straightforward structural directive.

Let's take the contents duplicate it.

It might sound like a very simple and kind of silly directive but believe it or not we're going to be

able to actually replace the energy for directive up here with a custom one that you and I are about

to make.

It actually has pretty good and solid purpose.

All right.

So let's start to work on the structural directive debt.

Number one is to generate a new directive at our terminal.

We gonna flip on over to my terminal I'm inside of my pages directory and once again I'll do an energy

generate directive and we're going to call this directive times because we're going to like duplicate

some elements some number of times we'll run that and we've got a new file created called times not

directive thought T.S..

Let's flip back over to our Ed and find that file here's times not directive to us and you'll notice

that we ended up with the exact same starter code that we had for the other directive though our other

directive we put together of class directive was an attribute directive.

This one right here is a structural directive.

It turns out that we first generate these files the code inside them pulley identical it's what code

we add inside of here that determines whether or not this is going to be structural in nature or some

attribute changing thing in nature and the first big difference between these two types of directives

is gonna be to the different things we import at the top with our structural directive over here.

We're going to import to kind of nasty sounding things don't worry it's not going to be that bad.

We're gonna add in three imports in total two of them are gonna be kind of specific for our structural

directive.

We're going to get template ref u container F and then input input right here.

Same kind of input decorator that we've seen a couple of times but template wrap and view container

F are definitely new things we're going to use these to customize the arguments that are accepted into

our constructor let's just write out some code all very quickly show you what is going on inside of

my constructor list I going to first put a new line in just to give myself a little bit of space is

we're gonna write out some kind of long arguments here gonna first say private you container and that's

going to be a type you container wrap then as the second argument I'm gonna get private template ref

and that's going to be a template ref that is a generic type inside of here I'm going to put in any

and I just noticed I misspelled private so many pick setup

but what are these.

Well the view container is a reference to the element that we applied our directive to.

So in other words if we think back to the UL example I just showed you like this right here we are applying

at times to the U L element though in this case view container would be like a reference to that you

well you might hear that and merely say wait a minute isn't that just what we got back over inside the

class directive with element ref.

Well it's a little bit different this view container ref is a kind of custom version of our element

it gives us the ability to very easily add in more elements or remove elements or essentially render

some other templates inside there.

So even though it is kind of a reference to this wrapping element it's a version of it that makes it

really easy to work with the contents of it.

Hence the name view container wrap because it's containing some other elements than the other property

or the other argument of template ref is a reference to whatever elements are placed inside of the element

that we applied our directive to though in this case it would be a reference more or less to like the

ally and anything else we does we actually write out inside of here that these first two arguments now

with our constructor we're not going to write anything else or any other initialization inside there

that's pretty much good as is the next and we're going to add in is another one of those setter methods.

So as we discussed just a moment to go we want to eventually have something that looks like this right

here something it says at times equals five but this ends up being some very similar syntax to what

we just discussed around our class directive up here.

Remember we had at class this one little statement right here both specified that we wanted to use that

directive and that the app class property on our directive class as well we're going to do the same

thing this time around with a different name of app times.

So in other words echo over here I'm going to add in an input decorator I'm going to use that kind of

input aliasing feature that we've just discussed.

I say whenever the at times property is set on an element we're going to instead that a property called

render and inside of here we're going to receive the number of times that we're supposed to render out

the containing elements as an argument okay.

Now the code in here as you're kind of sensing you're probably getting a sense that these like structural

directive things are a little bit more complicated.

Yeah they kind of are as we start to use these view container and template wrap things you're gonna

see the stuff is a little bit more nasty and the very simple attribute directives or at least relatively

simple we're going to write out just a couple of lines of code that are really going to implement our

entire directive.

They're going to be a little bit mysterious.

The first thing to say is this dot view container not clear then after that I'm going to iterate from

zero all the way up to times and for every step of iteration I'm going to create a new instance of this

template ref and we're going to add it into the view container.

I'll say for that I equals zero I less than times I plus plus and then inside I'll do this dot view

container not create embedded view as the first argument I'll pass in this dot template ref as a second

argument I can pass on an empty object for right now OK.

So kind of nasty stuff here.

So what's really going on.

Well remember we're going to be potentially setting the at times property several times though whenever

we write out the five right here this is putting in a fixed value of five but we could potentially provide

a reference to some method on our app components like it.

Number of times and the value returned from this might be changing over time.

So if that value changes over time that means that we're going to want to show different amounts of

allies over time as well.

The first thing we do inside of this render method is we clear out any elements that are currently inside

of our view container.

And remember the view container is like this you all thing right here.

But the number of times we're going to render this changes we're going to delete everything inside it

is already existing and we're going to recreate everything inside there from scratch.

This line of code right here is going to take a look at our view container and it's going to try and

create some new HDL inside that's what this create embedded view is the HCM all that we're going to

create is provided by the template ref.

And again the template ref is more or less the H team L that we had placed inside of the element we

applied our directive to as I just mentioned.

Yeah.

This stuff is a little bit more complicated.

I really just want to give you kind of a very practical example of how to create a structural directive

but yeah to be honest I don't think you're going to be doing this very frequently.

So believe it or not we pretty much have enough to actually test out here.

Going to replace that get number of times with just the number five I'm going to save this I'll flip

back over to my application inside the browser and at the bottom you'll see.

Sure enough we've got high there repeated five times to even if it is mysterious on how this stuff is

working it does actually work.

Now we've got this directive together let's delete this will you all down here.

And when we come back the next video I'm gonna show you how we can make another little change that directive

and then use it to replace the existing energy for that we have right here.