In this video I'll introduce you to a couple of directives that are really

helpful for making your applications look and feel nice.

The first is the ngBlur directive.

Like it sounds, the ngBlur directive corresponds to JavaScript's blur event.

Don't worry if you've never heard of the blur event before.

The blur event is fired any time an input loses focus.

Say, for instance, the user's cursor is inside of the input like it is here.

When they click somewhere else, the blur event fires.

So right there, the blur event would fire.

Now let's think about our application.

When a user is editing the to do's name.

Clean the garage.

Rather than just clicking out of the to do, they have to go all the way over here

to the edit button, and click the edit button again to turn editing mode off.

It would be way more natural if, instead of going all the way back over

here to the edit button, all they had to do was click out of the input.

In other words, fire the blur event.

And that's exactly what we're going to accomplish with ngBlur.

Put ngBlur in out input.

With this directive, we're going to use a slightly different looking expression.

Here we're going to say editing equals false.

The reason we can do this is because the ngBlur

directive fires in only one direction.

In other words, it fires only when the user is clicking out of an input.

And this is unlike the ngClick directive, for instance, on the edit button.

With the edit button, this uses more of a toggle.

In one case, it's turning editing on, in another case, it's turning editing off.

And now that we've done this, let's preview our app,

refresh the page, clean, just the clean.

Now when I click out of the input.

When I click out of the input, ngBlur sets editing to false.

Looks great.

And the second directive we'll use to enhance our app is ngClass.

The ngClass directive uses angular expressions to conditionally

apply CSS classes to HTML elements.

In our app, we have a little UI flaw,

which puts our editing ends at a place when our input is visible.

See this right here?

The buttons are too high,

whereas they should be aligned with the middle of the input.

The key here is that we only want the CSS to apply when the input is open and

the scope is in editing mode.

In other words, we want the class applied here,

we don't want the class applied here.

So to apply the CSS, use the ngClass directive.

And by the way jumping to our CSS, the CSS

we're going to conditionally apply is just this margin here.

And that's just gonna move the buttons down about 17 pixels.

And then to accomplish that, we're applying

this editing item class conditionally to the item div.

The expressions for ngClass can be a little bit confusing.

I'm going to pass in an object, where the key is the class I want to apply.

So in this case, it's editing-item.

Like in our other directives, the expression is just the variable editing.

But no matter what the expression is,

if it evaluates to true, the class is then passed to the element.

If this evaluates to false, the class will not be passed to the element.

Now let's see this at work, refresh the page.

Inspect my item, and I can see here's my ngClass directive.

And editing mode is not on, so editing item is not a class here in this div.

And when I click edit, I can see that my class worked visually,

cause I can see the buttons move down, and of course ngClass is still there.

Now editing has evaluated to true.

So editing item is now applied to the div.

And there's the class right there.