101. Binding to Directive Properties

Jul 15, 2026 00:59 · 6:43 · English · Whisper Turbo · 1 Лектори
Този запис изтича днес. Подновяване за постоянно съхранение →
Индекс на лекция
Показване само
0:02
S… Speaker 1 (101. Binding to Directive Properties)
Our directive is looking really great.
0:04
S… Speaker 1 (101. Binding to Directive Properties)
We're almost there,
0:06
S… Speaker 1 (101. Binding to Directive Properties)
but there's one other thing I want to add,
0:09
S… Speaker 1 (101. Binding to Directive Properties)
one functionality I want to add.
0:11
S… Speaker 1 (101. Binding to Directive Properties)
Right now it's dynamic in a way that we can mouse over and then
0:15
S… Speaker 1 (101. Binding to Directive Properties)
move the mouse away,
0:16
S… Speaker 1 (101. Binding to Directive Properties)
but we can't decide which colors get used.
0:19
S… Speaker 1 (101. Binding to Directive Properties)
Now, if that were a directive we want to ship with,
0:23
S… Speaker 1 (101. Binding to Directive Properties)
like,
0:23
S… Speaker 1 (101. Binding to Directive Properties)
say, a third -party package we're offering,
0:26
S… Speaker 1 (101. Binding to Directive Properties)
the user,
0:27
S… Speaker 1 (101. Binding to Directive Properties)
the developer using this directive,
0:28
S… Speaker 1 (101. Binding to Directive Properties)
should be able to dynamically set the value.
0:31
S… Speaker 1 (101. Binding to Directive Properties)
Maybe we even want to do this in our own app because the color
0:35
S… Speaker 1 (101. Binding to Directive Properties)
we want to set changes depending on some other parameters in our app.
0:39
S… Speaker 1 (101. Binding to Directive Properties)
Right now,
0:40
S… Speaker 1 (101. Binding to Directive Properties)
the color is hard -coded in there,
0:42
S… Speaker 1 (101. Binding to Directive Properties)
transparent by default,
0:43
S… Speaker 1 (101. Binding to Directive Properties)
and blue if we mouse over it.
0:45
S… Speaker 1 (101. Binding to Directive Properties)
So that is something we can improve,
0:47
S… Speaker 1 (101. Binding to Directive Properties)
and we can improve it with a tool we already learned,
0:50
S… Speaker 1 (101. Binding to Directive Properties)
custom property binding.
0:53
S… Speaker 1 (101. Binding to Directive Properties)
as a side note custom event binding also works in directives but you
0:57
S… Speaker 1 (101. Binding to Directive Properties)
probably won't use that that often so how can we use custom
1:01
S… Speaker 1 (101. Binding to Directive Properties)
property binding then let's add two properties
1:05
S… Speaker 1 (101. Binding to Directive Properties)
to which we bind i'll add it with input here
1:09
S… Speaker 1 (101. Binding to Directive Properties)
and i'll name the first one default color
1:14
S… Speaker 1 (101. Binding to Directive Properties)
and set it equal to a string and even assign a
1:18
S… Speaker 1 (101. Binding to Directive Properties)
default color which is transparent
1:22
S… Speaker 1 (101. Binding to Directive Properties)
Now add input of course needs to be imported from add angular core.
1:26
S… Speaker 1 (101. Binding to Directive Properties)
I'll duplicate this and I'll set this to highlight
1:30
S… Speaker 1 (101. Binding to Directive Properties)
color.
1:31
S… Speaker 1 (101. Binding to Directive Properties)
That will be blue by default.
1:34
S… Speaker 1 (101. Binding to Directive Properties)
So we do have some default values to use,
1:36
S… Speaker 1 (101. Binding to Directive Properties)
but they can be overwritten from outside.
1:39
S… Speaker 1 (101. Binding to Directive Properties)
So now by default here,
1:42
S… Speaker 1 (101. Binding to Directive Properties)
I will assign my highlight
1:46
S… Speaker 1 (101. Binding to Directive Properties)
color for initially setting this.
1:49
S… Speaker 1 (101. Binding to Directive Properties)
And in my host listeners here,
1:52
S… Speaker 1 (101. Binding to Directive Properties)
if I mouse over it,
1:54
S… Speaker 1 (101. Binding to Directive Properties)
I will assign my highlight color.
1:57
S… Speaker 1 (101. Binding to Directive Properties)
Excuse me.
1:57
S… Speaker 1 (101. Binding to Directive Properties)
Here it should be my default color at the top,
2:00
S… Speaker 1 (101. Binding to Directive Properties)
of course.
2:00
S… Speaker 1 (101. Binding to Directive Properties)
So default color when we initialize this.
2:03
S… Speaker 1 (101. Binding to Directive Properties)
And then highlight color once we mouse over this.
2:06
S… Speaker 1 (101. Binding to Directive Properties)
And then default color again once we move the mouse away.
2:10
S… Speaker 1 (101. Binding to Directive Properties)
So here,
2:11
S… Speaker 1 (101. Binding to Directive Properties)
default color.
2:12
S… Speaker 1 (101. Binding to Directive Properties)
So with this,
2:14
S… Speaker 1 (101. Binding to Directive Properties)
it should still work just the way as it did before.
2:18
S… Speaker 1 (101. Binding to Directive Properties)
But now we can actually bind this from outside.
2:22
S… Speaker 1 (101. Binding to Directive Properties)
So in our app component where we use the better highlight directive,
2:25
S… Speaker 1 (101. Binding to Directive Properties)
we can now bind to default color and maybe set
2:29
S… Speaker 1 (101. Binding to Directive Properties)
this to yellow.
2:30
S… Speaker 1 (101. Binding to Directive Properties)
Should be a string though,
2:32
S… Speaker 1 (101. Binding to Directive Properties)
yellow.
2:32
S… Speaker 1 (101. Binding to Directive Properties)
And we can bind to highlight color and
2:36
S… Speaker 1 (101. Binding to Directive Properties)
pass a string which could be red.
2:38
S… Speaker 1 (101. Binding to Directive Properties)
And now if we save this,
2:41
S… Speaker 1 (101. Binding to Directive Properties)
notice that app better highlight,
2:42
S… Speaker 1 (101. Binding to Directive Properties)
the directives itself,
2:44
S… Speaker 1 (101. Binding to Directive Properties)
the name is not enclosed in square brackets.
2:47
S… Speaker 1 (101. Binding to Directive Properties)
Now you see it's red and yellow here.
2:50
S… Speaker 1 (101. Binding to Directive Properties)
Though we also detect a bug.
2:52
S… Speaker 1 (101. Binding to Directive Properties)
Initially,
2:53
S… Speaker 1 (101. Binding to Directive Properties)
before we mouse over,
2:54
S… Speaker 1 (101. Binding to Directive Properties)
it's a white.
2:55
S… Speaker 1 (101. Binding to Directive Properties)
The reason for this is when we assign default color here,
2:59
S… Speaker 1 (101. Binding to Directive Properties)
it's just not set here.
3:01
S… Speaker 1 (101. Binding to Directive Properties)
So to prevent this from happening,
3:04
S… Speaker 1 (101. Binding to Directive Properties)
what we can simply do is we initialize it here in ngOnInit
3:08
S… Speaker 1 (101. Binding to Directive Properties)
instead.
3:09
S… Speaker 1 (101. Binding to Directive Properties)
That's also before anything has been rendered,
3:11
S… Speaker 1 (101. Binding to Directive Properties)
but after our values here are available.
3:14
S… Speaker 1 (101. Binding to Directive Properties)
So here we can set this background color to this default color,
3:20
S… Speaker 1 (101. Binding to Directive Properties)
and now it should work fine.
3:21
S… Speaker 1 (101. Binding to Directive Properties)
Now we have yellow by default.
3:23
S… Speaker 1 (101. Binding to Directive Properties)
So this now works and now we are able to override this.
3:27
S… Speaker 1 (101. Binding to Directive Properties)
There are a couple of interesting things we can observe regarding the way we pass
3:31
S… Speaker 1 (101. Binding to Directive Properties)
down these values though.
3:33
S… Speaker 1 (101. Binding to Directive Properties)
The first interesting thing is that we have two
3:37
S… Speaker 1 (101. Binding to Directive Properties)
extra directive -like looking
3:41
S… Speaker 1 (101. Binding to Directive Properties)
things on the paragraph.
3:42
S… Speaker 1 (101. Binding to Directive Properties)
And this is just property binding.
3:44
S… Speaker 1 (101. Binding to Directive Properties)
Now, how does Angular know if we want to bind to a property
3:49
S… Speaker 1 (101. Binding to Directive Properties)
of paragraph,
3:49
S… Speaker 1 (101. Binding to Directive Properties)
which of course doesn't have a default color,
3:52
S… Speaker 1 (101. Binding to Directive Properties)
or to a property of our directive?
3:55
S… Speaker 1 (101. Binding to Directive Properties)
The answer is,
3:56
S… Speaker 1 (101. Binding to Directive Properties)
it just figures that out.
3:57
S… Speaker 1 (101. Binding to Directive Properties)
It simply checks our own directives and so on first before it
4:01
S… Speaker 1 (101. Binding to Directive Properties)
reaches the native properties of elements.
4:05
S… Speaker 1 (101. Binding to Directive Properties)
That's another important takeaway.
4:07
S… Speaker 1 (101. Binding to Directive Properties)
We can bind to properties of our own directives by
4:11
S… Speaker 1 (101. Binding to Directive Properties)
simply placing them on the same element.
4:13
S… Speaker 1 (101. Binding to Directive Properties)
These properties,
4:13
S… Speaker 1 (101. Binding to Directive Properties)
I mean.
4:14
S… Speaker 1 (101. Binding to Directive Properties)
Enclosed in square brackets,
4:15
S… Speaker 1 (101. Binding to Directive Properties)
of course.
4:16
S… Speaker 1 (101. Binding to Directive Properties)
Now, for ng class,
4:18
S… Speaker 1 (101. Binding to Directive Properties)
you see that somehow the directive itself is enclosed in
4:22
S… Speaker 1 (101. Binding to Directive Properties)
square brackets.
4:23
S… Speaker 1 (101. Binding to Directive Properties)
And that's a typical use case,
4:25
S… Speaker 1 (101. Binding to Directive Properties)
especially if you only have one property to bind,
4:28
S… Speaker 1 (101. Binding to Directive Properties)
or at least one main property.
4:30
S… Speaker 1 (101. Binding to Directive Properties)
Then you can provide an alias,
4:33
S… Speaker 1 (101. Binding to Directive Properties)
and we can do this here for,
4:35
S… Speaker 1 (101. Binding to Directive Properties)
let's say,
4:36
S… Speaker 1 (101. Binding to Directive Properties)
the highlight color.
4:37
S… Speaker 1 (101. Binding to Directive Properties)
And set this equal to your directive selector.
4:41
S… Speaker 1 (101. Binding to Directive Properties)
So app better highlight in this case.
4:43
S… Speaker 1 (101. Binding to Directive Properties)
If I set this as an alias for the highlight color.
4:47
S… Speaker 1 (101. Binding to Directive Properties)
Now this assignment here won't work anymore.
4:51
S… Speaker 1 (101. Binding to Directive Properties)
So I will remove it.
4:53
S… Speaker 1 (101. Binding to Directive Properties)
Instead now I can enclose my main directive into square
4:57
S… Speaker 1 (101. Binding to Directive Properties)
brackets.
4:58
S… Speaker 1 (101. Binding to Directive Properties)
And set this equal to red.
5:00
S… Speaker 1 (101. Binding to Directive Properties)
So now we should still see yellow and red.
5:04
S… Speaker 1 (101. Binding to Directive Properties)
But now we're having the same style of enclosing the directive itself.
5:09
S… Speaker 1 (101. Binding to Directive Properties)
And it's important to understand that this is only an option.
5:12
S… Speaker 1 (101. Binding to Directive Properties)
You can set such an alias.
5:16
S… Speaker 1 (101. Binding to Directive Properties)
But that's not something you have to do.
5:18
S… Speaker 1 (101. Binding to Directive Properties)
And by default,
5:20
S… Speaker 1 (101. Binding to Directive Properties)
as you saw before,
5:21
S… Speaker 1 (101. Binding to Directive Properties)
the directive name is not enclosed in squared brackets.
5:24
S… Speaker 1 (101. Binding to Directive Properties)
That really only happens if you want to bind to a property which
5:28
S… Speaker 1 (101. Binding to Directive Properties)
has the same name or alias like your directive
5:32
S… Speaker 1 (101. Binding to Directive Properties)
selector.
5:34
S… Speaker 1 (101. Binding to Directive Properties)
One other thing about how we pass down data,
5:37
S… Speaker 1 (101. Binding to Directive Properties)
one other thing which is true about property binding in
5:41
S… Speaker 1 (101. Binding to Directive Properties)
general.
5:42
S… Speaker 1 (101. Binding to Directive Properties)
If you pass down a string,
5:45
S… Speaker 1 (101. Binding to Directive Properties)
like now we use squared brackets and then single quotation marks,
5:50
S… Speaker 1 (101. Binding to Directive Properties)
well,
5:50
S… Speaker 1 (101. Binding to Directive Properties)
you can take a shortcut.
5:51
S… Speaker 1 (101. Binding to Directive Properties)
You can remove the squared brackets and remove the single quotation marks.
5:55
S… Speaker 1 (101. Binding to Directive Properties)
And that is a special case.
5:57
S… Speaker 1 (101. Binding to Directive Properties)
If you're passing down a string,
5:59
S… Speaker 1 (101. Binding to Directive Properties)
you can do,
6:00
S… Speaker 1 (101. Binding to Directive Properties)
you can add property binding without squared brackets if
6:04
S… Speaker 1 (101. Binding to Directive Properties)
you then also omit the single quotation marks between the double quotation marks.
6:08
S… Speaker 1 (101. Binding to Directive Properties)
And that should work as it did before.
6:11
S… Speaker 1 (101. Binding to Directive Properties)
No error.
6:11
S… Speaker 1 (101. Binding to Directive Properties)
You can use this.
6:13
S… Speaker 1 (101. Binding to Directive Properties)
You will see me use this later in the course with official Angular directive.
6:17
S… Speaker 1 (101. Binding to Directive Properties)
Be careful that if you use it,
6:20
S… Speaker 1 (101. Binding to Directive Properties)
it's really clear that this is property binding,
6:23
S… Speaker 1 (101. Binding to Directive Properties)
that no one thinks that this could be a real attribute existing
6:27
S… Speaker 1 (101. Binding to Directive Properties)
for the element you placed it on.
6:29
S… Speaker 1 (101. Binding to Directive Properties)
Then this is absolutely fine to be used.
6:31
S… Speaker 1 (101. Binding to Directive Properties)
And this is our directive finished with some extra
6:35
S… Speaker 1 (101. Binding to Directive Properties)
features like host listener,
6:36
S… Speaker 1 (101. Binding to Directive Properties)
host binding.
6:38
S… Speaker 1 (101. Binding to Directive Properties)
and dynamically setting values from outside.

Този транскрипт е генериран от AI (автоматско разпознаване на речта). Може да съдържа грешки — проверка срещу оригиналния аудио за критична употреба. Политика на МА

❤️ Харесвате ли STT.ai? Кажете на приятелите си!
Резюме
Щракнете Съвкупно, за да генерирате AI резюме на този транскрипт.
Обобщавам...
Попитайте интелигентния интелект за този текст
Попитайте нещо за този транскрипт – АИ ще намери съответни раздели и отговор.
"Транкрипирай още един"