All language subtitles for 11. Multiple Directives with Ng-Container

Now that we've got that little reminder on how the energy if directive works let's try to apply it to

our big list of allies that we're generating right here and just limit the number that we can see at

any given time.

A very easy way to use the energy of directive in this case just to kind of things kind of like working

here.

We could check the index or that I variable we can say that if i is less than five let's show the element.

So we should use energy if true.

Otherwise if the eye variable is greater than five.

So like anything over here to the right hand side like all these things over here let's set the energy

if two false so we can just try to hide all the things over here that's not going to be a very good

long term solution.

But it's at least going to expose you to a little air that's going to come up very quickly.

OK.

So I got to find that ally and then right after the energy for DirecTV I want to conditionally hide

or show that L.A. element after it has been created by NRG for.

I'll say energy if inside there I'll say I less than five.

You'll notice right away I get a little air.

Let's hover over that and see what the air is.

The first sentence here is basically worthless and really doesn't tell us a lot about what's going on.

What's more useful is the second statement says use only one attribute prefixed with Star and g the

start N G is a reference to a structural directive.

Remember a structural directive is a directive that changes the structure of our HCM out.

It creates or removes HDMI elements both energy for an energy if are structural directives it turns

out there's a very important rule for you to understand we can only apply one structural directive to

any given element though this ally right now already has a structural directive we can not add a second

one if we do we're gonna get an error that looks like that right there but how can we fix this we still

want to produce a list of allies but we want to toggle whether or not some of these allies are visible

maybe one way to handle this would be to wrap this ally with another element like a div or something

like that let's try that out I'm going to wrap that Beghal ally with a div now we have two separate

elements and now on the div I can apply the energy or directive to a div I'll cut the energy for DirecTV

and paste it on the div now we're going to produce many copies of this div and everything inside of

it and then for every single ally we'll take a look at the index if it's less than 5 we're going to

show this element otherwise it's greater than 5 we're going to hide it so let's try this and see if

it works out it's all flip back over and now I only see a couple of elements here let's definitely good

but there's another issue notice how the styling of each individual Button has now changed a little

bit each individual button is now kind of like it's own little segment whereas before they were kind

of like this neat very join line and there was a solid line at the very bottom and now I see these rounded

edges which just looks a little bit off though what's going on here.

Well it turns out that just introducing additional elements into our template for the sake of using

structural directives is generally a pretty bad idea.

The reason for that is well what we just saw the bootstraps the SS library expects to see a well element

with some allies directly inside of it but right now we don't have that we've got a UL that contains

a div that contains the ally and so the styling that is being provided to us from bootstrap is not working

as expected this is all because we just arbitrarily decided to throw an extra H simple element inside

of the structure any time that you feel like you're going to use a structural directive like what we're

doing right here just for the sake of adding in some like additional elements just we can throw on the

additional structural directive it's generally a bad idea we don't want to add an arbitrary extra elements

nonetheless we still want to use energy for and energy F and they can't be on the same element we're

kind of back in the original scenario how are we gonna fix this now that have done a long enough lead

in and I hope you understand what the problem is.

Let me show you what the solution is rather than displaying an element of div right here we're going

to instead show something called energy container I'm going to close the closing date right there or

update the closing div two energy container as well an energy container is a very special element it

doesn't actually create an HDMI element it exists solely so we can apply extra structural directives

like this one right here energy container was made specifically to address the scenario that we are

currently in this template actually gets rendered angular is going to take a look it's going to see

this extra element right here it's going to process the energy for DirecTV but it's not going to display

anything or energy container instead it's just going to take whatever its contents are.

So in this case the ally and that is what is going to actually show up inside of our template.

Again you can really imagine energy container as being like an invisible element of sorts if I now save

this and flip back over now I've got the nice styling that I had before if I even open up my element

inspector and take a look at the structure right there I'll see very quickly and I've got the Well I've

got the previous page ally.

Then I start up my list of allies right here that are being generated by the energy for it so I don't

see any kind of like energy container or anything like that.

I just see the ally again.

That energy container element is like an invisible element.

We use it specifically to get around that rule of only one structural directive per element.

So this is a good improvement but right now our energy if logic right here is not that great just to

in comparison to see if ice less than five.

So that means if we start going to the left we're never gonna show any additional pages on the page

nature.

We need to have a little bit better logic inside there.

Let's take a look at how we might fix that up rather than just checking to see if I is less than five.

We're going to instead just do a little bit more of a check here.

I'm going to call a method that I can define on our class called Jack vote check index check window

index and I'll pass in I into their as you can guess.

I really do have a good name for this method.

I've a different name in my notes but I look at my notes right now I don't like the name I picked.

So is going to use something arbitrarily different instead let's go defined that method back in our

class and we're going to use that method to decide whether or not we should show this Ally go back inside

my component.

I'm gonna go down to the very bottom I'll define that method of check window index that will be called

with some index that's going to be a number and from this I'm going to return math dot absolutes and

we're going to find the difference between this dot current page and index.

We're just gonna make sure that that is less than 5 very essentially going to show a window of five

elements on either side of the current page and you might be curious why just to find an extra method

just to essentially put down this little boolean statement.

The reason is that we're making use of the math object right here and unfortunately we don't have access

to the math object inside our template.

Back over here inside the engine if I try to write out math dot absolutes we're going very quickly see

an error and says sorry but you can't use that.

That's the only reason I created the separate method.

Now we have that separate method and we've got the energy if statement side there.

Let's look back over.

Now I see the first five elements and as I start to click next the window starts to expand and so it

starts to grow.

I can see now I've got all these different elements and then finally I start to get up to the end here.

It's going to start to shrink down until I hit just 24.

Now I think you can agree with me that having this like kind of expanding thing right here is really

awkward particularly when you're starting to click next.

As you keep on having to reposition the mouse and ideally we would figure out a better solution to this.

But for right now honestly we're going to kind of ignore that.

It's very much outside the purpose of this application.

I'm not going to be too concerned about it.

OK.

So let's take a quick pause right here and continue in just a minute.