99. Using HostListener to Listen to Host Events

Jul 15, 2026 01:03 · 3:00 · English · Whisper Turbo · 2 Mga Speaker

Ang transcript na ito ay magtatapos ngayon. Upgrade para sa permanenteng imbakan →

Talaan ng mga lektura

0:02

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So we saw two examples for directives now and the better approach definitely

0:06

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

is a good approach,

0:07

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

but it's not very interactive,

0:09

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

right?

0:09

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

It always gives us a blue background.

0:13

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And I want to change this.

0:14

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

I only want to style this blue or give this a blue background if I hover

0:19

S… Speaker 2 (99. Using HostListener to Listen to Host Events)

over it.

0:19

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And if I move my mouse away,

0:21

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

it should go back to transparent.

0:23

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So let's improve the better highlight here a bit.

0:27

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

We need to react to some events occurring on the element the

0:31

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

directive sits on.

0:32

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And a quick and easy way to do this inside of this directive is to

0:36

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

simply add a new decorator.

0:40

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And this is the host listener decorator,

0:43

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

which needs to be imported from at Angular core and added to

0:47

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

some method we want to execute.

0:49

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So the method here could be mouse over.

0:52

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

Now I will move this from

0:57

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

the top of the file below ng on init here.

0:59

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So now this can be triggered whenever some

1:04

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

event occurs and that event is specified here as an argument as

1:08

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

a string.

1:09

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

Host listener here takes the argument name as an input and

1:14

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

that would be mouse enter,

1:16

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

let's say.

1:16

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

That is one of the events supported by

1:21

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

the DOM element this directive sits on.

1:23

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So you have basically all events available you could also use with event binding

1:27

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

before.

1:28

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So that's my host listener targeting this event.

1:32

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And we could also receive the event data here.

1:35

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So event data of type event would be passed to us here.

1:39

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So that works.

1:40

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

You can also listen to custom events here and retrieve that data.

1:43

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So this is just like the method you execute when you add a click

1:48

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

listener or whatever your event is and then pass the method between

1:52

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

the quotation marks.

1:53

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So that's happening here.

1:54

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

Host listener is just a convenient way.

1:57

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

of listening to events on that element.

1:58

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So with that,

2:00

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

we listen to the mouse entry event,

2:02

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

we get the event data,

2:03

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

which I don't need here.

2:04

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

But what I want to do in this case is,

2:07

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

I want to change the background color of the element.

2:10

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So what I can do is,

2:13

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

I can copy this code from Angie on init and comment it out.

2:17

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And now set the style here on mouse enter.

2:20

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And now I can quickly copy this and add another method.

2:25

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

which I'll name mouse leave maybe,

2:29

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

where I will listen to the mouse leave event,

2:32

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

another official event I can listen to.

2:34

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And then I want to set the background color to transparent

2:39

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

maybe.

2:39

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

Now with this in place,

2:41

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

we should have a reactive directive.

2:44

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So now no background color.

2:46

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

And if I hover over it,

2:48

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

It gets blue.

2:49

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

So that is working as intended.

2:51

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

Now with host listener reacting to user event or

2:56

S… Speaker 1 (99. Using HostListener to Listen to Host Events)

to any events.

Ang transcript na ito ay ginawa ng AI (automatic speech recognition). Maaaring may mga pagkakamali — suriin ang orihinal na audio para sa kritikal na paggamit. Patakaran ng AI

❤️ Pag-ibig STT.ai? Sabihin sa iyong mga kaibigan!

Buod

I-click ang Summarize upang makabuo ng isang AI buod ng transcript na ito.

Magtanong sa AI Tungkol sa Transcript na Ito

Magtanong ng anumang bagay tungkol sa transcript na ito - ang AI ay makahanap ng mga kaugnay na mga seksyon at sagot.

Isalin ang isa pang