100. Using HostBinding to Bind to Host Properties

Jul 15, 2026 00:59 · 3:17 · English · Whisper Turbo · 2 Zvučnici

Ovaj transkript ističe danas. Nadogradnja za stalnu pohranu →

Indeks predavanja

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.

Ovaj transkript je generirao AI (automatsko prepoznavanje govora). Može sadržavati greške — provjeriti protiv originalnog audio za kritičnu upotrebu. Pravila AI

❤️ Volite STT.ai? Recite svojim prijateljima!

Sažetak

Kliknite Summarise za generiranje AI sažetka ovog transkripta.

Pitaj AI o ovom Transcriptu

Pitajte bilo štovom transkriptu – AI će pronaći relevantne dijelove i odgovor.

Transcribe drugi