30_event_binding

Jul 13, 2026 07:19 · 4:09 · English · Whisper Turbo · 1 Cynhadledd

Mae'r trosglwyddiad hwn yn darfod heddiw. Uwchraddio i storfa barhaol →

Mynegai Llythrennedd

0:02

S… Speaker 1 (30_event_binding)

In last lectures,

0:03

S… Speaker 1 (30_event_binding)

we learned a lot about how we can use property binding and string

0:07

S… Speaker 1 (30_event_binding)

interpolation to output data in the template.

0:10

S… Speaker 1 (30_event_binding)

Let's now react to events.

0:12

S… Speaker 1 (30_event_binding)

For example,

0:12

S… Speaker 1 (30_event_binding)

we have a button here and after two seconds,

0:15

S… Speaker 1 (30_event_binding)

this button is enabled.

0:16

S… Speaker 1 (30_event_binding)

So it would be nice if we could do something once we click the button.

0:20

S… Speaker 1 (30_event_binding)

Now, I will soon show you how we can actually add a new server,

0:24

S… Speaker 1 (30_event_binding)

how we can add a new replication of our server selector of

0:28

S… Speaker 1 (30_event_binding)

our server component here.

0:30

S… Speaker 1 (30_event_binding)

For now,

0:31

S… Speaker 1 (30_event_binding)

what I want to do is,

0:32

S… Speaker 1 (30_event_binding)

I want to output something.

0:35

S… Speaker 1 (30_event_binding)

I will remove this text here,

0:37

S… Speaker 1 (30_event_binding)

and instead here,

0:38

S… Speaker 1 (30_event_binding)

I want to output the value of a property.

0:40

S… Speaker 1 (30_event_binding)

I'll create this property,

0:41

S… Speaker 1 (30_event_binding)

and again,

0:42

S… Speaker 1 (30_event_binding)

you may ignore ngOnInit for now,

0:44

S… Speaker 1 (30_event_binding)

I will come back to this.

0:45

S… Speaker 1 (30_event_binding)

I will name it server.

0:47

S… Speaker 1 (30_event_binding)

creation status and initially I will set it to no server

0:51

S… Speaker 1 (30_event_binding)

was created like this Now this

0:55

S… Speaker 1 (30_event_binding)

property can be output wire string interpolation server creation status

1:00

S… Speaker 1 (30_event_binding)

and I just told you I don't want to Continue outputting data.

1:03

S… Speaker 1 (30_event_binding)

We want to listen to events.

1:05

S… Speaker 1 (30_event_binding)

So I promised it will do it.

1:07

S… Speaker 1 (30_event_binding)

I will add another method

1:09

S… Speaker 1 (30_event_binding)

below here,

1:10

S… Speaker 1 (30_event_binding)

and I will name this method onCreateServer.

1:14

S… Speaker 1 (30_event_binding)

The on at the beginning to kind of make clear that this will be triggered

1:18

S… Speaker 1 (30_event_binding)

from within my template.

1:20

S… Speaker 1 (30_event_binding)

You don't have to name it on something,

1:22

S… Speaker 1 (30_event_binding)

but it kind of makes it easier to understand who will call this method.

1:27

S… Speaker 1 (30_event_binding)

Well,

1:27

S… Speaker 1 (30_event_binding)

the user will basically,

1:29

S… Speaker 1 (30_event_binding)

by doing something,

1:30

S… Speaker 1 (30_event_binding)

some event will call it.

1:31

S… Speaker 1 (30_event_binding)

That is what I want to symbolize with that.

1:33

S… Speaker 1 (30_event_binding)

So in here,

1:34

S… Speaker 1 (30_event_binding)

I will set the server creation status to server was.

1:38

S… Speaker 1 (30_event_binding)

created.

1:39

S… Speaker 1 (30_event_binding)

So the missing piece of course is to call this method

1:43

S… Speaker 1 (30_event_binding)

and now here is where event binding comes into play.

1:46

S… Speaker 1 (30_event_binding)

We want to listen to this click event here and

1:50

S… Speaker 1 (30_event_binding)

typically you have the onClick attribute on the HTML element

1:54

S… Speaker 1 (30_event_binding)

where you can now execute some JavaScript code.

1:57

S… Speaker 1 (30_event_binding)

We won't use that with Angular though.

1:59

S… Speaker 1 (30_event_binding)

Here we have the syntax Angular offers us event

2:04

S… Speaker 1 (30_event_binding)

binding which uses parentheses

2:07

S… Speaker 1 (30_event_binding)

like property binding used squared brackets.

2:09

S… Speaker 1 (30_event_binding)

For events,

2:11

S… Speaker 1 (30_event_binding)

parentheses are the signal that we're using event binding.

2:14

S… Speaker 1 (30_event_binding)

And here we have to specify the name of the event between the

2:18

S… Speaker 1 (30_event_binding)

parentheses.

2:19

S… Speaker 1 (30_event_binding)

For example,

2:20

S… Speaker 1 (30_event_binding)

click.

2:21

S… Speaker 1 (30_event_binding)

And you can basically bind to all the events made available

2:25

S… Speaker 1 (30_event_binding)

by the HTML attribute you're placing this on.

2:29

S… Speaker 1 (30_event_binding)

So if you have on click on mouse enter,

2:32

S… Speaker 1 (30_event_binding)

you could bind to click mouse enter without the on at the beginning.

2:37

S… Speaker 1 (30_event_binding)

So we bind to the click event and now between the quotation

2:41

S… Speaker 1 (30_event_binding)

marks we put the code we want to execute once

2:45

S… Speaker 1 (30_event_binding)

this event occurs.

2:46

S… Speaker 1 (30_event_binding)

Now oftentimes you will call a method here.

2:50

S… Speaker 1 (30_event_binding)

So let's do this.

2:51

S… Speaker 1 (30_event_binding)

Let's point to the method we want to execute which is onCreateServer

2:56

S… Speaker 1 (30_event_binding)

with parentheses.

2:58

S… Speaker 1 (30_event_binding)

So this method will now get executed whenever we click the button.

3:02

S… Speaker 1 (30_event_binding)

As a side note,

3:03

S… Speaker 1 (30_event_binding)

you don't have to execute a method here.

3:05

S… Speaker 1 (30_event_binding)

You could also put the code you want to execute right between the quotation

3:10

S… Speaker 1 (30_event_binding)

marks.

3:10

S… Speaker 1 (30_event_binding)

Oftentimes,

3:11

S… Speaker 1 (30_event_binding)

this is not very good because you want to execute more

3:15

S… Speaker 1 (30_event_binding)

code if some event happens.

3:17

S… Speaker 1 (30_event_binding)

But if all you want to do is set some Boolean property to true,

3:21

S… Speaker 1 (30_event_binding)

for example,

3:22

S… Speaker 1 (30_event_binding)

well,

3:23

S… Speaker 1 (30_event_binding)

you can definitely do this inline the template.

3:25

S… Speaker 1 (30_event_binding)

As a general rule,

3:27

S… Speaker 1 (30_event_binding)

though, you shouldn't put too much logic into your templates,

3:31

S… Speaker 1 (30_event_binding)

though.

3:31

S… Speaker 1 (30_event_binding)

So now we're binding the click event and

3:35

S… Speaker 1 (30_event_binding)

we execute the onCreateServer method when it occurs.

3:38

S… Speaker 1 (30_event_binding)

So let's see this in action.

3:40

S… Speaker 1 (30_event_binding)

In our application,

3:41

S… Speaker 1 (30_event_binding)

let's reload the page.

3:42

S… Speaker 1 (30_event_binding)

The button gets enabled.

3:45

S… Speaker 1 (30_event_binding)

And now watch this part here.

3:47

S… Speaker 1 (30_event_binding)

If I click the button.

3:49

S… Speaker 1 (30_event_binding)

it changes to server was created because we are triggering

3:53

S… Speaker 1 (30_event_binding)

our own method here.

3:55

S… Speaker 1 (30_event_binding)

And this is how simple event binding works.

3:57

S… Speaker 1 (30_event_binding)

Use parentheses,

3:59

S… Speaker 1 (30_event_binding)

the event name in between,

4:01

S… Speaker 1 (30_event_binding)

and then between the quotation marks,

4:03

S… Speaker 1 (30_event_binding)

the code you want to execute when this event occurs.

Creuwyd y trawsgrifiad hwn gan AI (cydnabod llais awtomatig). Gall gynnwys gwallau - gwiriwch yn erbyn y sain wreiddiol am ddefnydd pwysig. Polisi AI

❤️ Love STT.ai? Dweud wrth eich ffrindiau!

Crynodeb

Cliciwch Crynodeb i greu crynodeb AI o' r trosysgrif yma.

Gofyn i AI Am Y Trawssgrifiad Yma

Gofynnwch unrhyw beth am y trosglwyddiad hwn — bydd y AI yn canfod adrannau perthnasol ac yn ateb.

Trosysgrifo Un Arall