32_padding_and_using_data_with_event_binding

Jul 13, 2026 07:19 · 4:37 · English · Whisper Turbo · 1 Speakers

Această transcriere expiră astăzi. Actualizarea pentru stocarea permanentă →

Indice de lecție

0:02

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

In the last lecture,

0:03

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we had a look at event binding.

0:04

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

Now before focusing on two -way binding and explaining what this is,

0:08

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

there's one other important thing you need to know about event binding.

0:11

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

Let's say before this button,

0:14

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we also have a label,

0:15

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

server name,

0:16

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

and then more importantly,

0:18

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we have an input.

0:19

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

which we maybe give a bootstrap class of form control.

0:23

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

Here,

0:23

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

I want to allow the user to enter the name of the server,

0:26

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

which should get created.

0:28

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So here we could listen to the input event.

0:31

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

This is a normal DOM event provided by the input element,

0:35

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

which is fired whenever the user types.

0:36

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And here we could execute on update server

0:41

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

name because it will be fired on every keystroke.

0:44

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So let's add this method to our component here.

0:49

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

I somehow want to output what the user entered right now,

0:53

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

what the value of this field is.

0:55

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

Now we can do this by passing dollar sign event

0:59

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

here.

1:00

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And dollar sign event,

1:02

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

super important,

1:03

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

is kind of a reserved variable name you can use in the template

1:07

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

when using event binding.

1:09

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

For this event,

1:10

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

so only between these quotation marks here,

1:13

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

dollar sign event will simply be the

1:17

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

data emitted with that event.

1:19

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So input and click are default events provided by the DOM,

1:23

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

you could say.

1:24

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And they ship us some data when they are fired.

1:27

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

The click event gives us an object which for example holds the coordinates where we clicked.

1:31

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And the input event also gives us some data,

1:34

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

some information about the event.

1:35

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

Now we can capture this data with $event passed

1:40

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

as an argument to the method we're calling or used anywhere

1:44

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

between these quotation marks in the code we're executing.

1:47

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

$event,

1:48

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

something to keep in mind.

1:49

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

Reserve the word which gives us access to the event data.

1:53

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So now we pass this to onUpdateServerName.

1:56

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So here we know we will receive this event and this will be

2:00

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

of type Annie for now.

2:01

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So now let's simply log it to the console so

2:05

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

that we can see it in this debug log.

2:07

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

If we do this and I

2:12

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

now type something here,

2:13

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

watch the console on the right.

2:15

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

A couple of outputs were written there,

2:18

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

four to be precise,

2:19

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

because I typed four characters,

2:21

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

did four keystrokes,

2:22

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

so the input event was fired four times.

2:25

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And if we have a look at this event,

2:27

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we got a couple of information here,

2:28

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

for example,

2:30

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

the target.

2:31

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And the target simply is the HTML element on which this

2:35

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

event occurred.

2:35

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So here on the target,

2:37

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

since this is an input element,

2:39

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

if we scroll down,

2:41

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we also got

2:46

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

the value test.

2:48

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And this is what the user entered.

2:49

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So what we can do now in our TypeScript code is

2:53

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we can set a server name property,

2:56

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

which is an empty string by default.

2:58

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And then here in on update server name,

3:01

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

instead of logging it,

3:02

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we could say this server name.

3:05

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And we just learned that on the event,

3:07

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

which is of type event,

3:09

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

as we now also saw here,

3:12

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we have a target and on the target we have a value.

3:16

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

Now this is only available because the target is

3:20

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

of type input element though.

3:22

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

This is why my ID doesn't like it.

3:24

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

We can explicitly inform it about the type in TypeScript by adding HTML

3:29

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

input element here in front of it

3:33

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

like this.

3:35

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

And again,

3:35

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

this is just needed to inform

3:38

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

TypeScript that we know that the type of the HTML element of

3:43

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

this event will be an HTML input element.

3:45

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

We do this explicit casting with this syntax with the opening and

3:49

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

closing tag with the smaller and greater than sign and the type

3:53

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

in between.

3:54

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So with that,

3:55

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we assign this value to our server name.

3:58

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

What we can now do is in the HTML file here,

4:02

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we can output this for now.

4:05

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

So a string interpolation.

4:07

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

we could output the server name below the input.

4:10

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

If we save this and go back to this application and I type

4:14

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

test server here,

4:16

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

you see this dynamically updates below the input.

4:19

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

This is how you can use this $event object

4:24

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

to fetch the event data.

4:26

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

Now with that,

4:28

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

let's move on to two -way data binding to kind of

4:32

S… Speaker 1 (32_padding_and_using_data_with_event_binding)

finish this little example app here for now.

Această transcriere a fost generată de AI (reconociune automată de vorbire). Poate conține erori — verificați împotriva audio-ului original pentru utilizare critică. Politica de asociere a aerului intern

❤️ Îți place STT.ai? Spune-le prietenilor tăi!

Rezumatul

Faceți clic pe Summarize pentru a genera un rezumat al IA a acestei transcripții.

Întreabă Al despre acest text

Întreabă orice despre această transcriere — IA va găsi secțiuni relevante și răspunsul.

Transcrie Altul