Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,370 --> 00:00:04,180
The last video we made use of the energy class directive.
2
00:00:04,180 --> 00:00:09,730
Now I want to give you a couple notes on energy class and just help you understand how flexible it is.
3
00:00:09,760 --> 00:00:14,230
First one to begin by telling you that the syntax we have right here is definitely what we want.
4
00:00:14,230 --> 00:00:17,140
This is the best thing to write or the scenario that we are currently in.
5
00:00:17,550 --> 00:00:21,980
What I am going to make a couple of changes to this thing just to show you how flexible energy class
6
00:00:21,980 --> 00:00:22,550
is.
7
00:00:22,650 --> 00:00:26,620
But at the very end of this video I'm going to revert all my code to what you see right here.
8
00:00:26,760 --> 00:00:30,640
But if you do not want to write out some different code and then you have to just revert all of it almost
9
00:00:30,640 --> 00:00:31,350
immediately.
10
00:00:31,480 --> 00:00:36,510
Just take a watch at what I'm doing as opposed to making any changes to your project OK.
11
00:00:36,540 --> 00:00:41,550
So inside this energy class directive there is a lot of flexibility on the different kinds of values
12
00:00:41,550 --> 00:00:43,030
we can throw inside of here.
13
00:00:43,200 --> 00:00:48,870
For example rather than throwing in some kind of object like that we could be as simple as throwing
14
00:00:48,870 --> 00:00:53,790
in a plain string if we did something like this the energy class directive would look at this value
15
00:00:54,100 --> 00:00:55,380
you would see a plain string.
16
00:00:55,380 --> 00:00:59,610
It would just take that value and add it to the class attributes.
17
00:00:59,610 --> 00:01:04,180
Now you're just about never going to see this ever inside of a real angular project.
18
00:01:04,260 --> 00:01:09,060
If you ever have the energy class directive and you're just throwing in a plain string inside you might
19
00:01:09,060 --> 00:01:13,880
as well throw it on the normal class property rather than doing something like this.
20
00:01:13,950 --> 00:01:20,250
You're gonna see more frequently is people calling a method on our app component or whatever component
21
00:01:20,250 --> 00:01:26,070
this is tied to who we might call a method like get class and then inside of that method we might have
22
00:01:26,070 --> 00:01:30,780
some logic to decide what list of classes we want to apply to this element.
23
00:01:30,780 --> 00:01:32,490
Let's go over to the app component.
24
00:01:32,490 --> 00:01:34,700
We're going to define this get class method.
25
00:01:34,830 --> 00:01:38,850
Again remember we're going to revert all this code in just a moment but I want to show you some common
26
00:01:38,850 --> 00:01:44,170
patterns that you're going to see inside of a helper method like this.
27
00:01:44,390 --> 00:01:51,150
Back inside of my app component I'm gonna go down to the very bottom and define the get class method.
28
00:01:51,160 --> 00:01:55,520
There's really two very common patterns that you're going to see that I just want you to be aware of.
29
00:01:55,650 --> 00:02:00,660
The first common pattern you're going to see inside of a method like this is to do some series of checks.
30
00:02:00,760 --> 00:02:07,970
You might have an if statement here that says like if something is true then return a class of active.
31
00:02:08,490 --> 00:02:14,100
Otherwise if something else is true then return some other
32
00:02:16,710 --> 00:02:25,200
class and then maybe we want to do some like final check down here and say if something yet else is
33
00:02:25,200 --> 00:02:28,780
true return yet another class name.
34
00:02:28,800 --> 00:02:31,210
This is the first kind of pattern that you might want to see.
35
00:02:31,630 --> 00:02:33,380
So it's going to do some kind of series of checks.
36
00:02:33,390 --> 00:02:38,620
And as soon as one check is evaluated to be true we're gonna return that class and nothing else is going
37
00:02:38,620 --> 00:02:39,810
to get applied.
38
00:02:40,170 --> 00:02:45,750
The other very common pattern you're going to see is where we build up a list of different class names.
39
00:02:45,870 --> 00:02:52,020
In this scenario we might define some array up here like maybe const classes and I'll initialize it
40
00:02:52,020 --> 00:02:56,060
to be an empty array and we can do some kind of series of checks like what we just saw.
41
00:02:56,090 --> 00:03:00,090
So maybe you will check to see if something is true if it is.
42
00:03:00,090 --> 00:03:08,110
We can add in a new class to the classes array or maybe add in a class of active then we might do some
43
00:03:08,110 --> 00:03:15,670
other check like something else and if that is true we'll push in some other class like I don't know
44
00:03:16,420 --> 00:03:19,710
something then maybe we do one last check.
45
00:03:22,210 --> 00:03:23,660
Of yet another check.
46
00:03:23,970 --> 00:03:29,870
And then classes don't push maybe some last class of just simply check.
47
00:03:30,000 --> 00:03:35,640
And then at the very bottom you'd return that array of classes though in this scenario we returning
48
00:03:35,670 --> 00:03:37,050
an array of strings.
49
00:03:37,410 --> 00:03:42,750
But energy class is a very capable energy class knows exactly what to do if you give it an array of
50
00:03:42,750 --> 00:03:43,890
strings right here.
51
00:03:43,890 --> 00:03:49,200
We could very easily call get class right now assign it to the energy class directive that's going to
52
00:03:49,200 --> 00:03:54,180
take the big list of strings that we've built up and apply all those different classes as properties
53
00:03:54,420 --> 00:03:56,190
to that element.
54
00:03:56,220 --> 00:04:00,480
These are the two very common patterns you're going to see it when we define a helper method to decide
55
00:04:00,540 --> 00:04:03,160
what classes to apply.
56
00:04:03,170 --> 00:04:03,450
All right.
57
00:04:03,480 --> 00:04:07,730
So like I said I just wanted to write this out very quickly as a demonstration.
58
00:04:07,840 --> 00:04:10,970
I'm going to delete this method.
59
00:04:11,070 --> 00:04:17,680
I'm gonna go back over and I'm going to undo until I get that object back like so again energy class.
60
00:04:17,710 --> 00:04:19,230
Couple of different ways we could use it.
61
00:04:19,240 --> 00:04:20,940
We can build up an object like this.
62
00:04:20,980 --> 00:04:23,030
We can call a method and return a plane string.
63
00:04:23,050 --> 00:04:27,940
We can call a method and return an array of strings and all the elements inside that array will be applied
64
00:04:28,000 --> 00:04:28,760
as classes.
65
00:04:29,980 --> 00:04:32,420
That's it for right now on the energy class directive.
66
00:04:32,430 --> 00:04:36,170
Let's take a pause and continue working on this component in the next video.
7201
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.