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:05,780
We've now seen how we can mess around with an element that we apply a custom directive to.
2
00:00:05,780 --> 00:00:09,380
Let's now start to increase the complexity of this little directive.
3
00:00:09,380 --> 00:00:13,940
We're going to say that instead of always setting the background color to Orange let's allow another
4
00:00:13,940 --> 00:00:20,100
developer or ourselves in this case to specify exactly what background color we want to set.
5
00:00:20,120 --> 00:00:25,160
In other words I want to allow another developer out in a little bit of extra code inside of here something
6
00:00:25,190 --> 00:00:28,790
like maybe background color or color or something like that.
7
00:00:28,850 --> 00:00:36,550
I wanted to be able to be specified on the fly as like black or red or yellow or whatever else but in
8
00:00:36,550 --> 00:00:42,250
order to do so I want you to recall exactly how we were communicating from a parent component down to
9
00:00:42,280 --> 00:00:45,740
a child component EQ on some previous applications.
10
00:00:45,760 --> 00:00:48,080
Let me give you a quick reminder of how we did that.
11
00:00:48,100 --> 00:00:53,830
I'm going gonna give you a very quick little code snippet down here at the very bottom the file to communicate
12
00:00:56,010 --> 00:00:58,360
from parent to child component.
13
00:00:58,440 --> 00:01:02,770
We did something like this in the parent component template.
14
00:01:03,060 --> 00:01:10,270
We wrote out something like app dash card and then on there we use that property binding syntax.
15
00:01:10,290 --> 00:01:13,940
We said something like title equals some value.
16
00:01:13,980 --> 00:01:18,480
And remember whatever was inside of those double quotes because we use the square brackets was evaluated
17
00:01:18,540 --> 00:01:21,510
as code that we wanted to put a raw string inside there.
18
00:01:21,510 --> 00:01:27,110
We would write out inside of single quotes something like Snowy Mountains after that.
19
00:01:27,140 --> 00:01:33,980
We then wrote out a little bit of code inside of the child component class inside the child component
20
00:01:33,980 --> 00:01:34,910
class file.
21
00:01:35,060 --> 00:01:40,680
We imported that input decorator from angular.
22
00:01:40,820 --> 00:01:47,390
We then created some child component and inside there we use the input decorator to say that there is
23
00:01:47,390 --> 00:01:52,170
going to be some property that was created and assigned by the parent component.
24
00:01:52,190 --> 00:01:58,000
That's how we used that little input decorator though in this scenario the parent component would create
25
00:01:58,000 --> 00:02:03,430
an instance of the card component it would then set the title property equal to whatever was inside
26
00:02:03,460 --> 00:02:09,120
of those double quotes inside the child component we specified that this property right here with an
27
00:02:09,120 --> 00:02:15,180
identical name of title was going to be set by the parent component by using that input decorator.
28
00:02:15,180 --> 00:02:20,060
So all that stuff went on just to communicate from a parent to a child.
29
00:02:20,090 --> 00:02:21,690
Now make a guess.
30
00:02:21,690 --> 00:02:27,810
How we communicate from say this element right here down into the directive how do we pass information
31
00:02:27,810 --> 00:02:28,850
down.
32
00:02:28,930 --> 00:02:30,270
Yep we do the same thing.
33
00:02:30,450 --> 00:02:35,070
It's the same thing but to communicate information into a directive we're gonna use the property binding
34
00:02:35,070 --> 00:02:42,100
syntax everything inside there will be evaluated as code we're going to write out the name of the property
35
00:02:42,130 --> 00:02:48,980
that we want to set on the directive and then on the directive class we're going to use the input decorator.
36
00:02:49,190 --> 00:02:53,950
We're going to decorate some property that is identically named between the two.
37
00:02:54,020 --> 00:02:59,480
That's how we're gonna communicate information into a custom directive with all that minds.
38
00:02:59,500 --> 00:03:01,330
Let's do all that right now.
39
00:03:01,960 --> 00:03:05,080
To get started inside of my last directive.
40
00:03:05,170 --> 00:03:10,180
I'm going to get the input decorator and I'm going to say that this thing is going to have some new
41
00:03:10,180 --> 00:03:18,610
property called 0 2 background color and I'm going to decorate it with the input decorator and I'm going
42
00:03:18,610 --> 00:03:20,290
to say that this thing is going to be a string
43
00:03:23,220 --> 00:03:25,040
and simple enough.
44
00:03:25,260 --> 00:03:30,690
Then after that I'll go back over to my apt component I'll find it where I'm making use of that app
45
00:03:30,720 --> 00:03:37,770
class directive and right after app class I'll put in the property binding syntax of background color
46
00:03:39,400 --> 00:03:44,170
and I'll say inside those double quotes I want to assign this thing the string of red.
47
00:03:44,530 --> 00:03:48,490
And the only reason company in all those extra spaces is to just make sure it's really clear that I
48
00:03:48,490 --> 00:03:53,260
have a separate string inside of here of red because we're using those square brackets.
49
00:03:53,260 --> 00:03:55,990
Everything inside gets evaluated as code.
50
00:03:55,990 --> 00:03:58,160
We have to wrap that string with single quotes.
51
00:03:58,180 --> 00:04:02,410
Otherwise if we just put like that right there angular is going to think that we're trying to look up
52
00:04:02,470 --> 00:04:07,780
the red property on our component class but that's not we want to do we just want to throw in the string
53
00:04:07,810 --> 00:04:09,990
of red OK.
54
00:04:10,020 --> 00:04:14,850
So as soon as you add the in you might very quickly start to see an error around this.
55
00:04:14,850 --> 00:04:16,230
If you see an error around that.
56
00:04:16,320 --> 00:04:17,550
Here's what to do.
57
00:04:17,580 --> 00:04:20,840
Go to the menu bar find a view select command pallet.
58
00:04:21,000 --> 00:04:27,320
And once again we're going to search for reload window and go ahead and run that command if the error
59
00:04:27,320 --> 00:04:28,590
still persists after that.
60
00:04:28,610 --> 00:04:34,590
Then you very likely have a typo somewhere else and so want to do a little bit of troubleshooting OK.
61
00:04:34,620 --> 00:04:41,100
So now we can flip back over to our class directive now inside the constructor we can attempt but not
62
00:04:41,100 --> 00:04:48,660
successfully we can attempt to set the background color of the element do whatever the background color
63
00:04:48,690 --> 00:04:50,230
property is.
64
00:04:50,250 --> 00:04:52,290
Now why am I saying attempt here.
65
00:04:52,290 --> 00:04:56,190
Well the reason that we are only attempting this and the reason it's not going to work remember what
66
00:04:56,190 --> 00:05:01,620
is going on behind the scenes angular is going to first create an instance of this class directive as
67
00:05:01,620 --> 00:05:03,540
soon as it sees app class right there.
68
00:05:03,960 --> 00:05:08,580
So as soon as English sees app class it finds this class reads an instance out of it.
69
00:05:08,610 --> 00:05:13,560
And that means that we're going to run all the code inside the constructor Well as soon as we run this
70
00:05:13,560 --> 00:05:20,090
constructor we have not yet set the value of background color but the constructor is going to run background
71
00:05:20,120 --> 00:05:25,880
color is going to be undefined and so we're going to set the elements background color property to undefined
72
00:05:25,880 --> 00:05:34,370
as well in like half a second later or a fraction of a second later angular is going to complete asking
73
00:05:34,400 --> 00:05:39,050
the rest of the template and it's going to see that it needs to set the background color property to
74
00:05:39,080 --> 00:05:40,100
red.
75
00:05:40,100 --> 00:05:46,040
And so right after this constructor runs background color then gets set to the string of red but unfortunately
76
00:05:46,040 --> 00:05:50,890
by that time it is too late just to get a very easy solution right here.
77
00:05:50,890 --> 00:05:53,010
I'll show you a more foolproof solution.
78
00:05:53,020 --> 00:05:55,390
Just a moment but you just get a solution.
79
00:05:55,390 --> 00:06:01,780
I'm going to wrap that stuff inside the constructor with a set time out now as I do this I'm going to
80
00:06:01,780 --> 00:06:04,010
add a comment right above it.
81
00:06:04,130 --> 00:06:06,430
I'm going to put a set time out of like 50 milliseconds.
82
00:06:06,450 --> 00:06:10,920
So I'm gonna put a comment right above I say never do this.
83
00:06:11,050 --> 00:06:16,630
This is not the right way to somehow get access to a property after the element has actually been instantiated
84
00:06:16,660 --> 00:06:18,410
or created.
85
00:06:18,490 --> 00:06:19,050
Don't do this.
86
00:06:19,060 --> 00:06:22,170
We're just doing this as a quick little solution just so I can show you that.
87
00:06:22,180 --> 00:06:22,550
Yeah.
88
00:06:22,690 --> 00:06:25,800
That's how we communicate some value down into the directive.
89
00:06:25,960 --> 00:06:29,460
It's going to save it now flip back over and there we go.
90
00:06:29,470 --> 00:06:32,000
Background color of red but all worked.
91
00:06:32,040 --> 00:06:34,430
But like I said not a good solution though.
92
00:06:34,450 --> 00:06:35,740
How do we fix this.
93
00:06:35,740 --> 00:06:39,430
Well let's take a quick pause right here we'll come back the next video and I'll show you exactly how
94
00:06:39,430 --> 00:06:40,720
to solve this situation.
10213
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.