This course will be retired on January 6, 2020.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
As you’ve seen, Angular has a lot of “work horse” built in directives. ng-click for instance, might be used dozens of times across a single application. Angular also offers directives that I’d classify as “nice to haves.” One of these is ng-blur. ng-blur evaluates an expression on a “blur” event. A blur event takes place when an input loses focus - for instance when a user’s cursor is in an input and then they click out of it. In this video we’ll add the ng-blur directive to our input in order to enhance our application’s user experience.
-
0:00
In this video I'll introduce you to a couple of directives that are really
-
0:04
helpful for making your applications look and feel nice.
-
0:07
The first is the ngBlur directive.
-
0:11
Like it sounds, the ngBlur directive corresponds to JavaScript's blur event.
-
0:16
Don't worry if you've never heard of the blur event before.
-
0:20
The blur event is fired any time an input loses focus.
-
0:24
Say, for instance, the user's cursor is inside of the input like it is here.
-
0:29
When they click somewhere else, the blur event fires.
-
0:33
So right there, the blur event would fire.
-
0:41
Now let's think about our application.
-
0:43
When a user is editing the to do's name.
-
0:48
Clean the garage.
-
0:52
Rather than just clicking out of the to do, they have to go all the way over here
-
0:55
to the edit button, and click the edit button again to turn editing mode off.
-
1:00
It would be way more natural if, instead of going all the way back over
-
1:05
here to the edit button, all they had to do was click out of the input.
-
1:13
In other words, fire the blur event.
-
1:15
And that's exactly what we're going to accomplish with ngBlur.
-
1:23
Put ngBlur in out input.
-
1:28
With this directive, we're going to use a slightly different looking expression.
-
1:32
Here we're going to say editing equals false.
-
1:39
The reason we can do this is because the ngBlur
-
1:42
directive fires in only one direction.
-
1:45
In other words, it fires only when the user is clicking out of an input.
-
1:50
And this is unlike the ngClick directive, for instance, on the edit button.
-
1:57
With the edit button, this uses more of a toggle.
-
2:01
In one case, it's turning editing on, in another case, it's turning editing off.
-
2:07
And now that we've done this, let's preview our app,
-
2:12
refresh the page, clean, just the clean.
-
2:17
Now when I click out of the input.
-
2:19
When I click out of the input, ngBlur sets editing to false.
-
2:24
Looks great.
-
2:26
And the second directive we'll use to enhance our app is ngClass.
-
2:31
The ngClass directive uses angular expressions to conditionally
-
2:35
apply CSS classes to HTML elements.
-
2:39
In our app, we have a little UI flaw,
-
2:42
which puts our editing ends at a place when our input is visible.
-
2:47
See this right here?
-
2:49
The buttons are too high,
-
2:51
whereas they should be aligned with the middle of the input.
-
2:55
The key here is that we only want the CSS to apply when the input is open and
-
3:01
the scope is in editing mode.
-
3:05
In other words, we want the class applied here,
-
3:08
we don't want the class applied here.
-
3:10
So to apply the CSS, use the ngClass directive.
-
3:21
And by the way jumping to our CSS, the CSS
-
3:27
we're going to conditionally apply is just this margin here.
-
3:33
And that's just gonna move the buttons down about 17 pixels.
-
3:37
And then to accomplish that, we're applying
-
3:41
this editing item class conditionally to the item div.
-
3:46
The expressions for ngClass can be a little bit confusing.
-
3:53
I'm going to pass in an object, where the key is the class I want to apply.
-
4:00
So in this case, it's editing-item.
-
4:08
Like in our other directives, the expression is just the variable editing.
-
4:15
But no matter what the expression is,
-
4:17
if it evaluates to true, the class is then passed to the element.
-
4:23
If this evaluates to false, the class will not be passed to the element.
-
4:30
Now let's see this at work, refresh the page.
-
4:41
Inspect my item, and I can see here's my ngClass directive.
-
4:46
And editing mode is not on, so editing item is not a class here in this div.
-
4:51
And when I click edit, I can see that my class worked visually,
-
4:56
cause I can see the buttons move down, and of course ngClass is still there.
-
5:02
Now editing has evaluated to true.
-
5:04
So editing item is now applied to the div.
-
5:08
And there's the class right there.
You need to sign up for Treehouse in order to download course files.
Sign up