Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,900 --> 00:00:04,320
In this video we're going to figure out a better way to implement this step right here.
2
00:00:04,320 --> 00:00:09,480
So we're going to remove this set time outs and relocate this code to a more appropriate location.
3
00:00:09,570 --> 00:00:10,760
Understand how to do this.
4
00:00:10,770 --> 00:00:17,430
I first want to help you understand how angular treats a directive that we create a directive is treated
5
00:00:17,430 --> 00:00:24,330
by angular very very similarly if not identically to how normal components are treated as well.
6
00:00:24,330 --> 00:00:29,310
Behind the scenes whenever angular starts to pass our template it sees the app class directive right
7
00:00:29,310 --> 00:00:29,860
there.
8
00:00:30,000 --> 00:00:35,190
It's going to go and create an instance of the matching class regular is going to create an instance
9
00:00:35,250 --> 00:00:42,580
of class directive we can almost imagine that there's some code inside of angular that looks like this
10
00:00:42,770 --> 00:00:51,790
on the it says on directive is new class directive then immediately after that English is going to see
11
00:00:51,800 --> 00:00:57,620
that we try to set the background color property on there to a string of red but once again we can almost
12
00:00:57,620 --> 00:01:03,410
imagine that there's a line of code in angular that does something like this directive dot background
13
00:01:03,680 --> 00:01:11,210
color equals red what you and I really want to do to solve this issue inside of our constructor is somehow
14
00:01:11,270 --> 00:01:13,650
detect this event right here.
15
00:01:13,760 --> 00:01:20,180
We want to detect any time that the background color property gets set we can very easily do so by using
16
00:01:20,240 --> 00:01:22,580
a little feature of typescript.
17
00:01:22,580 --> 00:01:24,960
This is a feature that we've not really looked that before.
18
00:01:24,980 --> 00:01:30,170
So let's go back over to the typescript playgrounds of our browser and we're going to show you just
19
00:01:30,200 --> 00:01:32,220
a little bit of syntax.
20
00:01:32,330 --> 00:01:37,520
So once again I'm at typescript Lang dot org slash play right write out a quick little example right
21
00:01:37,520 --> 00:01:44,520
here everyone loves when they're learning about typescript classes of car right.
22
00:01:44,580 --> 00:01:45,230
That's what I'm told.
23
00:01:45,230 --> 00:01:46,450
People love class car.
24
00:01:46,470 --> 00:01:48,360
No I'm kidding of course very boring.
25
00:01:48,360 --> 00:01:50,930
But nonetheless let me show you the quick example.
26
00:01:51,060 --> 00:01:52,290
Very similar to our directive.
27
00:01:52,290 --> 00:01:57,930
Let's imagine that class car car has a color property and maybe this thing is going to start off as
28
00:01:57,930 --> 00:01:59,260
like a string of red.
29
00:01:59,540 --> 00:02:08,550
And we might create an instance of car and then tried to set that property though identical to what
30
00:02:08,550 --> 00:02:13,560
we just saw inside of our Ed so it would be fantastic if we could somehow detect this setting event
31
00:02:13,560 --> 00:02:16,400
right here and run some code in response to it.
32
00:02:16,500 --> 00:02:19,150
What turns out with typescript we can do exactly that.
33
00:02:19,530 --> 00:02:22,710
Here's how we do it inside of my class of car.
34
00:02:22,710 --> 00:02:31,550
I'm going to write out that other gonna make that a method and it's going to receive some argument of
35
00:02:31,830 --> 00:02:32,720
you color.
36
00:02:32,930 --> 00:02:38,410
And that's going to be a string and then going to remove the old property definition right there and
37
00:02:38,410 --> 00:02:40,380
just leave this setter.
38
00:02:40,400 --> 00:02:42,190
So what does this thing really do.
39
00:02:42,190 --> 00:02:43,960
Well by adding on set right here.
40
00:02:44,020 --> 00:02:49,540
That means that when ever we run this line of code right here whenever we tried to update the value
41
00:02:49,540 --> 00:02:55,910
of the color property it's going to instead run this color method though inside the method as a first
42
00:02:55,910 --> 00:03:00,350
argument we're going to receive whatever we were passing in as or whenever we were trying to do the
43
00:03:00,350 --> 00:03:03,740
assignment with in this case new color would be blue.
44
00:03:03,740 --> 00:03:09,850
As a matter of fact if I do a console log of color we'll see a console log of blue.
45
00:03:09,850 --> 00:03:13,390
So I'll zoom out it's going to click Run really quick take my console.
46
00:03:13,400 --> 00:03:14,210
And yeah there we go.
47
00:03:14,210 --> 00:03:18,980
We got blue that's pretty much it to detect never a property get set.
48
00:03:18,980 --> 00:03:24,950
We can write out a method with a name identical to the property and then put the set keyword right in
49
00:03:24,950 --> 00:03:27,920
front of it whenever we then set that property.
50
00:03:27,920 --> 00:03:29,580
We can run some code.
51
00:03:29,890 --> 00:03:31,460
And so as you could probably guess.
52
00:03:31,460 --> 00:03:37,760
Well that would be really fantastic to use inside of our class directive because whenever angular behind
53
00:03:37,760 --> 00:03:43,340
the scenes runs something like that line of code right there we can take the color that is provided
54
00:03:43,340 --> 00:03:50,240
for the assignment and use it to update your background color of art a element OK.
55
00:03:50,290 --> 00:03:59,970
I'm going to delete this stuff down here and I'm going to add in that background color I'm gonna receive
56
00:04:00,030 --> 00:04:06,200
some color argument that's going to be a string and I'm going to cut and paste this entire line inside
57
00:04:06,200 --> 00:04:08,900
the constructor inside of this new setter
58
00:04:12,180 --> 00:04:17,660
and then at the very end over here I'm going to update that to background color come from whatever argument
59
00:04:17,660 --> 00:04:23,360
was actually passed in you'll notice that now we've got a little bit of an error here that's because
60
00:04:23,360 --> 00:04:28,580
we've got a duplicate of some property though as far as typescript is concerned.
61
00:04:28,700 --> 00:04:32,830
This right here is really kind of like defining a property that we've now got.
62
00:04:32,840 --> 00:04:37,430
Well one property called background color and another called background color.
63
00:04:37,580 --> 00:04:39,020
So how do we get around this.
64
00:04:39,020 --> 00:04:43,210
Well it turns out that we just remove the original definition right here.
65
00:04:43,270 --> 00:04:44,890
We're going to delete that.
66
00:04:44,890 --> 00:04:49,540
And then finally we still want to make sure that this kind of like imaginary property right here and
67
00:04:49,540 --> 00:04:52,350
still be set by some parent component.
68
00:04:52,360 --> 00:04:58,060
Now the last step we're going to apply the at input decorator on there like so.
69
00:04:58,220 --> 00:05:04,440
And then finally I'm going to remove all that set time out stuff out of the constructor and that's it.
70
00:05:04,630 --> 00:05:06,700
This syntax right here pretty nasty.
71
00:05:06,910 --> 00:05:12,340
But the other day all that really allows us to do is intercept any time angular tries to set a property
72
00:05:12,610 --> 00:05:17,440
on our directive as soon as we intercept that we're going to take the value that English is trying to
73
00:05:17,440 --> 00:05:18,580
set that property to.
74
00:05:18,660 --> 00:05:21,760
And we're going to use it to actually update something else.
75
00:05:21,760 --> 00:05:26,120
We're kind of like intercepting this assignment and tricking angular almost.
76
00:05:26,160 --> 00:05:31,060
Now I say tricking but this is a hundred percent intended behavior so we're not like breaking anything
77
00:05:31,060 --> 00:05:32,890
or going against the rules or anything like that.
78
00:05:33,560 --> 00:05:33,810
OK.
79
00:05:33,820 --> 00:05:39,330
So let's now save this look back over and I can see sure enough it's red.
80
00:05:39,790 --> 00:05:40,760
And if we want to.
81
00:05:40,780 --> 00:05:45,910
Well let's flip back over to our component class or the cone template excuse me we can change background
82
00:05:45,910 --> 00:05:53,610
color to Orange yep it's orange you get the idea and go to black for some crazy reason because now we've
83
00:05:53,610 --> 00:06:00,220
got black with black text kind of hard to read but yeah it definitely works OK.
84
00:06:00,280 --> 00:06:01,750
That's a little bit more on directives.
85
00:06:01,780 --> 00:06:06,960
That's how we make a directive that's going to respond to some property being set on it.
86
00:06:07,090 --> 00:06:10,660
There's still a little bit more I want to show you around custom directives so quick pause right here
87
00:06:10,690 --> 00:06:12,050
and I'll see you in just a minute.
9378
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.