100. Using HostBinding to Bind to Host Properties

Jul 15, 2026 00:59 · 3:17 · English · Whisper Turbo · 2 Дисплей

Ин нусхаи нусхаи имрӯз ба итмом мерасад. Навсозии барои захираи доимӣ →

Индекси дарс

0:02

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

So we learned about host listener and this setup here is absolutely fine

0:06

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

for what we're doing,

0:07

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

but we got another decorator we can

0:11

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

use, which then allows us to not use the renderer.

0:15

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

There is nothing wrong with using the renderer,

0:17

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

but we got an even easier way of simply changing the background

0:22

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

color if that is all we want to do in the directive.

0:24

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

Again, using the renderer is not wrong though.

0:27

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

The decorator I'm referring to

0:30

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

is called at host binding,

0:33

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

which also needs to be imported from at Angular core.

0:36

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

And since we got a lot of imports,

0:38

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

I'll quickly restructure this to cover multiple lines.

0:41

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

So host binding,

0:43

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

that's the new decorator.

0:44

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

And I will come back to what we passed here in a second.

0:48

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

First of all,

0:49

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

we need to bind this to some property.

0:53

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

which value will become important.

0:55

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

So that could be a background color property,

0:59

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

a new property I create here,

1:01

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

which is of type string.

1:02

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

Now in host binding,

1:05

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

we can pass a string defining to which property

1:09

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

of the hosting element we want to bind.

1:12

S… Speaker 2 (100. Using HostBinding to Bind to Host Properties)

Now,

1:13

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

properties of the hosting element,

1:16

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

that is simply what we also access here in the basic highlight directive.

1:21

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

style would be such a property and there then the background color property

1:25

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

to be precise.

1:26

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

Therefore we can simply say style dot

1:30

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

and now camel case background color and that's

1:34

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

all.

1:35

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

Camel case is important here because we're accessing the DOM property

1:39

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

which doesn't know dashes.

1:41

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

So with this

1:43

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

What we're telling Angular is on the element this directive

1:47

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

sits, please access the style property,

1:50

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

which pretty much any input has on other directives,

1:55

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

which access something like the value.

1:56

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

You of course have to make sure that they are only added to inputs,

1:59

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

which have this property.

2:01

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

But here again,

2:02

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

the style property should be available on any element.

2:05

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

So here we access the style property and then there a sub

2:09

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

property, the background color.

2:11

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

And we set this equal to whatever background color is set to here.

2:14

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

Well,

2:15

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

and we can simply change background color here when we mouse over it.

2:19

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

We can set background color to blue,

2:23

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

in this case,

2:25

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

and set it to transparent,

2:28

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

in this case here,

2:30

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

transparent.

2:31

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

And I will comment out the renderer code here.

2:33

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

Again, not wrong to use it,

2:35

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

but no longer needed in this example.

2:38

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

Of course,

2:38

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

we also have to set some initial colors so that we don't get an error before we

2:44

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

mouse over it the first time.

2:45

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

So here I will set this to transparent initially,

2:49

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

give this initial value.

2:51

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

With this,

2:53

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

it's transparent,

2:54

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

no error,

2:55

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

looks good.

2:56

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

And if we hover over it,

2:58

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

it works the same way as before,

3:00

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

but now solely driven through host listener and host

3:04

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

binding, a great way for working with the element inside

3:08

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

of a directive.

3:09

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

And of course,

3:09

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

here on host binding,

3:11

S… Speaker 1 (100. Using HostBinding to Bind to Host Properties)

you can bind to any property of the element you're sitting on.

Ин нусхаи навишташуда бо AI (муайянкунии худкори сухан) эҷод шудааст. Мумкин аст хатогиҳо дошта бошад - барои истифодаи муҳим бо аудиои аслӣ тафтиш кунед. Сиёсати AI

❤️ Шумо STT.ai- ро дӯст медоред? Ба дӯстонатон бигӯед!

Ҷамъбаст

Барои эҷоди ҷамъбасти AI- и ин нусхаи навиштаҷот, тугмаи ҷамъбастро пахш кунед.

Дар бораи ин нусхаи навиштаҷот аз AI пурсед

Дар ин ҷо ба шумо дар бораи ин раванд маълумот дода мешавад: Интихоби дурусти раванди эҷодӣ ва раванди таҳия.

& Дигарро гузарондан