All language subtitles for 16. Structural Directives6

Our application now looks pretty good but there's one last thing I would like to take care of.

If you recall the original mockup that we looked at we had said that when the application first loads

up inside the browser we were not going to show that additional little form element at the very bottom

was only after a user generated a password that we were gonna show some additional content down there

right now inside of our application.

That element is visible at all times.

Let's figure out some way to kind of conditionally either show or hide this little label in the input

inside of it based upon whether or not a user has generated a password to do so.

We're going to use a feature of angular that we use inside of our templates called a structural directive

let's first write out the structural directive inside of our template and get our application working

and we'll discuss exactly what a structural directive is.

All right I'm going to get started by going back over to my editor and once again finding my app component.

Each team will file an inside there.

I'll go down to the very bottom and find a div with class box listed right here and the label and input

inside of it are what display this stuff down here at the very bottom.

We want to add in a structural directive that is going to toggle whether or not this div gets displayed

and everything inside of it.

But to do so I'm going to find the div and inside of the opening div tag I'm gonna put in Star and G

F equals password.

Now let's say this go back over to our application and see what we get as soon as I flip back over.

I now see that by default I don't have that little output element at the bottom but if I enter in a

length and check with these checkboxes and then generate the password.

Now that element is visible again the purpose of the energy if structural directive is to conditionally

show or hide some element inside of our template.

Let's get a better idea of what this whole directive thing is and then kind of evaluate the syntax we

just use right there to actually create it though in the world of angular directives are little bits

of additional syntax we use inside of our templates.

There are technically three different types of directives but we're only going to discuss two of them

right now.

So the two that we're going to discuss right now are structural directives and attribute directives.

We just used a structural directive.

The purpose of a structural directive is to add or remove an HDL element but essentially a structural

directive.

You can think of as changing the structure of our template.

The other type of directive that we use is an attribute directive.

The goal of this is to change the properties of some H.M. element that it gets applied to.

There are a couple of structural directives in attribute directives that are included with angular.

So by just using angular you get a couple of each of these right out of the box but you and I as developers

also have the ability to write our own custom structural directives in our own custom attribute directives

as well.

And that's something that we're going to do later on INSIDE THIS COURSE though we're not going to cover

Achebe directives too much just yet.

All you really need to know is that we can use them to change the properties of an ancient element.

And like I said we're going cover them a little bit more later on right now.

Let's go back over to our editor and learn a little bit more about how the energy if structural DirecTV

behaves.

All right.

So back over here as you can guess.

This is the total key as we've seen with property binding and event binding already everything inside

of the double quotes of the energy if structural DirecTV gets evaluated as code.

So this right here riding up password means go over to our component class instance.

Remember that's the app component to yes file it means go over to this thing.

Take a look at the password property on our component class if this is ballsy.

This value is falsely or if it's true the either conditionally hide or show this div and everything

inside of it.

So when our component is first initialized and shows up inside the DOM the value of password is empty

string.

That's how that password property starts out.

Empty string inside of javascript is evaluated as false.

It is like the Boolean value false.

In other words when our component first gets displayed you can imagine that looking at parser right

there essentially turns into false which means I add this element and everything inside of it and at

some point time the user generates a password and we update the value of that password property to some

actual defined string no password.

At that point time essentially comes whatever they're randomly generated password is a string with some

characters inside of it is evaluated by JavaScript as being true or truth in nature but kind of turns

into energy if is true that means show this element and everything inside OK.

Again we've now seen these couple of different pieces of syntax like the event binding the property

binding all that stuff and the common theme here is that everything inside of those double quotes gets

evaluated as code and we have access to all the variables all the properties off of our component class.

So this is yet another example of that.

All right.

So as I mentioned we have the ability to write out our own structural directives and achieve directives

and that is something we're going to take care of later on.

I think our application looks pretty good.

And I've said several times that there is just one or two more things to do on our application but there

really is just one last very small thing we're going to take care of so quick pause and one last thing

they're going to deal with around our app.