All language subtitles for 12. NgSwitch

In this video we're going to take a look at another structural directive.

This one is somewhat similar to energy if but it's just a little bit more complex.

Now unfortunately I don't really see a good way of working in this directive to this application in

a very natural fashion.

So instead we're going to put together a couple of additional elements down here at the bottom to show

you exactly how this directive works.

It's kind of one of the scenarios where you'll know when you need this directive.

OK.

So I can go down to the bottom of my template and a comment out the div down there just so we don't

have the giant image hogging up the screen and I'll show you exactly what we're going to be doing here.

I'm going to place a div ON IT.

I'M GONNA PUT ON SOMETHING CALLED THE ENERGY switch directive inside this energy switch directive.

We're gonna produce or directly throw in some kind of value.

When I say produce that means that we could call a method on our class that I could like say oh a method

on here or refer to some property for example maybe you want to take a look at whatever the current

value of current pages I could reference current page and inside this div we're gonna place a couple

of other elements and on each of these elements we're going to apply the structural directive called

the Energy switch case.

I'm gonna put in a div here with Star Energy which case now angular is gonna take a look at whatever

is produced by this expression right here and then going to take a look at all the elements inside that

have this energy switch case directive on it it's gonna look at the value provided to each of them if

the result of current page matches whatever we stick inside here then this element will be displayed

for example if we stick in value 0 that means that this element will only be displayed when current

page is equal to zero Let's try putting some message inside there I'll say Grant age is zero I'll save

this in a flip back over by default our current page is zero that's how our application starts out and

as soon as I go to the next page that message goes away because no longer is current page matching the

value zero we can add in as many elements with energy switch case inside of here as you want I could

have one or like two and 1 4 3 current pages to read pages 3 and so on it sounds skipping over one here.

No particular reason.

Now if I flip back over I get current pages zero.

Now I want to go up to page 2 or really current page of number 1.

I don't have any matching switch case.

So I see no message as I go on to the next one that I see current pages 2 and current page is 3.

Like I said this is one of those directives where you're probably going to know when you need it.

As I mentioned it just doesn't quite work in naturally to the application working on right now.

There is one last thing I won't mention here.

Here's another very tightly coupled directive that works with these to put it at the bottom.

I'll put in Star Energy switch.

Default I you can imagine what this does if none of these different cases right here match the original

value that we produced then instead it will show what is whatever is inside of this element.

But in this case inside here I'll say unknown burnt H now I'll save this and I'll expect to see this

message appear whenever current page is not equal to zero 2 or 3.

Flip back over.

I now see.

Right here we don't have a case to handle this.

So we see unknown current page you'll see current pages to read and I get back to unknown current page

for all the rest of the pages inside of here.

That is pretty much it for energy switch.

Now last thing I want you to understand here is that if we have multiple matching cases they're all

going to be displayed.

In other words if I change the switch case to zero and zero.

Now in every current page is zero.

These will all be displayed.

That might sound kind of worthless but there actually are scenarios where you might want to have like

different elements inside of your or different sets of elements.

Go off or on whenever some value is equal to something as we can try that and we'll see.

Yup shows 0 2 and 3.

If you have multiple matching statements they will all be displayed.

OK so like I said that is pretty much it for energy switch.

All you have to remember is energy switch which case and switch default.

All right.

Let's take a pause right here.

When we come back the next video we're gonna take a look at how we can build our own custom structural

directive.

A quick pause and I'll see you in just a minute.