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 (आटोमेटिक स्पीच रिकग्निशन) द्वारा निर्मितः अस्ति । त्रुटिः वर्तते । अतः त्रुटिः वर्तते । अतः त्रुटिः वर्तते । AI नीतिः

❤️ STT.ai लभते? वदतु मित्रेभ्यः!

सारांशः

सम्पादयतु

ॐ ऐं ह्रीं

यदा यदा कस्यापि विषये प्रश्नः भवति, तदा यन्त्रं तत्संबंधितं भागं सूचयति, तथा उत्तरं प्रदत्तं भवति ।

अन्यं लिखितम्