Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,210 --> 00:00:01,990
All right my friends.
2
00:00:01,990 --> 00:00:05,380
Enough with this silly kind of background color example that everyone does.
3
00:00:05,380 --> 00:00:07,710
Let's turn this into something a little bit more interesting.
4
00:00:07,720 --> 00:00:12,400
We're going to accomplish the original goal here which was to allow ourselves to have a replacement
5
00:00:12,490 --> 00:00:15,080
for the energy class directive.
6
00:00:15,120 --> 00:00:20,950
Well we really have to do here is kind of make some updates to this background color center rather than
7
00:00:20,950 --> 00:00:22,750
setting some kind of like background color.
8
00:00:22,750 --> 00:00:24,350
I'm going to change the name of this.
9
00:00:24,400 --> 00:00:32,660
Something like set lasts about class names just to kind of differentiate it from the class keyword now
10
00:00:32,710 --> 00:00:35,240
our argument to this is going to be an object.
11
00:00:35,270 --> 00:00:40,100
Remember we're trying to re implement the energy class directive of the object that gets provided is
12
00:00:40,100 --> 00:00:44,990
going to have some keys those keys are going to eventually end up as classes that we're going to apply
13
00:00:44,990 --> 00:00:49,940
to our underlying element and then for every key we need to take a look and see whether or not that
14
00:00:49,940 --> 00:00:56,450
expression evaluates to either true or false instead of receiving the argument of color right there.
15
00:00:56,490 --> 00:00:59,980
I'm going to receive an argument of like class Obi J.
16
00:01:00,000 --> 00:01:08,990
Short for object and I'm going to annotate that as being of type any then I'm going to replace the logic
17
00:01:08,990 --> 00:01:09,890
inside of there.
18
00:01:09,890 --> 00:01:18,940
We're going to use a four let e in class of E.J. loop knows that this is a for in loop.
19
00:01:18,950 --> 00:01:24,840
You can use a for in loop to iterate over the keys of an object which is exactly what we want to do.
20
00:01:24,850 --> 00:01:29,710
Now the key right here is really gonna be like the class name that we want to apply to our element.
21
00:01:30,010 --> 00:01:34,960
And then if we look up the key inside of that object that will give us the Boolean value that we really
22
00:01:34,960 --> 00:01:35,500
care about.
23
00:01:36,280 --> 00:01:41,090
We can say if last Obi J at key if that is true.
24
00:01:41,170 --> 00:01:46,570
So if whatever expression it was provided evaluates to true and we want to take this key and apply it
25
00:01:46,720 --> 00:01:52,780
as a class to our underlying element but to do so inside the if statement will say this dot element
26
00:01:52,990 --> 00:02:03,070
not native element you'll use the class list API we'll call add an add in that key and we can handle
27
00:02:03,070 --> 00:02:04,070
the else case.
28
00:02:04,090 --> 00:02:09,720
So the case in which whatever key we just looked up evaluated to false in that case we'll look at this
29
00:02:09,720 --> 00:02:17,780
start element not native element class list but in this case we're going to remove annoyed you remove
30
00:02:18,720 --> 00:02:19,950
the given key.
31
00:02:19,970 --> 00:02:24,670
Remember when I say key I'm really talking about like a class that we want to apply okay.
32
00:02:24,710 --> 00:02:26,280
Let's say this.
33
00:02:26,330 --> 00:02:31,910
Now we're going to look back over I'm gonna go down to that H for element that we were working with.
34
00:02:31,910 --> 00:02:34,420
There are now completely redesigned this directive.
35
00:02:34,430 --> 00:02:36,050
Sophie you run with this code right here.
36
00:02:36,050 --> 00:02:39,740
We're gonna get some bad results so I'm going to delete that usage instead.
37
00:02:39,770 --> 00:02:43,570
I'm going to go around to all the energy class directives we have inside of here.
38
00:02:43,640 --> 00:02:47,930
I'm going to replace those with the app class directive that we just put together.
39
00:02:48,060 --> 00:02:58,390
I can replace energy class with app class energy class with app class and energy class with app class.
40
00:02:58,520 --> 00:03:04,070
Then let's say this look back over and you'll notice that the entire application is still working exactly
41
00:03:04,070 --> 00:03:06,980
as it was before before with no errors.
42
00:03:06,980 --> 00:03:08,150
Well no errors yet.
43
00:03:08,330 --> 00:03:13,130
We can take a look and see that sure enough that first button right there got the disabled class and
44
00:03:13,130 --> 00:03:16,220
we've got the active class on the button that is selected.
45
00:03:16,220 --> 00:03:22,030
I can start to hit next and they all update appropriately and as I start to get to the very end to the
46
00:03:22,040 --> 00:03:27,880
list the like 20 for the next button gets great out as well.
47
00:03:28,150 --> 00:03:28,930
So that's it.
48
00:03:28,930 --> 00:03:32,990
We've now created our own customary placement for energy class.
49
00:03:33,100 --> 00:03:37,600
I think you can agree with me that at the end of the day the actual logic that goes in this is not the
50
00:03:37,600 --> 00:03:39,080
worst thing in the world.
51
00:03:39,170 --> 00:03:44,260
It's really just understanding all this like special at input decorator and setters and all that crazy
52
00:03:44,260 --> 00:03:47,360
stuff that makes these directive things really complicated.
53
00:03:47,380 --> 00:03:51,960
Once you understand that everything else starts to get really easy okay.
54
00:03:52,040 --> 00:03:53,260
Let's take a quick pause right here.
55
00:03:53,330 --> 00:03:58,240
When we come back the next video we're going to start to work on our own custom structural directive.
56
00:03:58,250 --> 00:04:00,130
This right here is an attribute directive.
57
00:04:00,260 --> 00:04:04,640
We're gonna make a very different one very similar to the energy for directive.
58
00:04:04,690 --> 00:04:06,840
Quick pause and I'll see you in just a minute.
6281
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.