34_two_way_databinding

Jul 13, 2026 07:19 · 2:47 · English · Whisper Turbo · 3 स्पीकर

आजही हा सण साजरा केला जातो. स्थायी संचयीका करीता अद्ययावत करा →

वाचन अनुक्रमणिकाName

0:02

S… Speaker 2 (34_two_way_databinding)

In the last lectures,

0:03

S… Speaker 2 (34_two_way_databinding)

we learned a lot about event binding and property binding.

0:06

S… Speaker 2 (34_two_way_databinding)

Now let's combine both to two -way binding.

0:09

S… Speaker 2 (34_two_way_databinding)

We learned that we can get the event data like

0:13

S… Speaker 2 (34_two_way_databinding)

this, for example.

0:15

S… Speaker 2 (34_two_way_databinding)

There is another approach too,

0:17

S… Speaker 2 (34_two_way_databinding)

though. If I copy this and then comment it out.

0:21

S… Speaker 2 (34_two_way_databinding)

and now I replace this input event here with something else,

0:24

S… Speaker 2 (34_two_way_databinding)

you will find that we have an even easier way of binding to

0:29

S… Speaker 1 (34_two_way_databinding)

some data.

0:29

S… Speaker 2 (34_two_way_databinding)

With two -way data binding,

0:31

S… Speaker 2 (34_two_way_databinding)

we combine property and event binding.

0:34

S… Speaker 2 (34_two_way_databinding)

We use it therefore by combining the syntaxes,

0:37

S… Speaker 2 (34_two_way_databinding)

squared brackets,

0:38

S… Speaker 2 (34_two_way_databinding)

and within these,

0:40

S… Speaker 3 (34_two_way_databinding)

parentheses.

0:41

S… Speaker 1 (34_two_way_databinding)

Now here,

0:43

S… Speaker 2 (34_two_way_databinding)

we have to use a special directive,

0:45

S… Speaker 2 (34_two_way_databinding)

and we will learn more about directives in a second,

0:47

S… Speaker 2 (34_two_way_databinding)

ng -model.

0:49

S… Speaker 2 (34_two_way_databinding)

Now we can set this equal to some property defined in our TypeScript

0:53

S… Speaker 2 (34_two_way_databinding)

code, so to the server name for example.

0:55

S… Speaker 2 (34_two_way_databinding)

This setup will do the following.

0:58

S… Speaker 2 (34_two_way_databinding)

It will trigger on the input event and update the

1:02

S… Speaker 2 (34_two_way_databinding)

value of server name in our component automatically.

1:06

S… Speaker 2 (34_two_way_databinding)

On the other hand,

1:09

S… Speaker 2 (34_two_way_databinding)

since it is two -way binding,

1:10

S… Speaker 2 (34_two_way_databinding)

it will also update the value of the input element

1:14

S… Speaker 2 (34_two_way_databinding)

if we change server name somewhere else.

1:17

S… Speaker 2 (34_two_way_databinding)

And I can demonstrate this

1:20

S… Speaker 2 (34_two_way_databinding)

by going back to the TypeScript code and setting server name to

1:24

S… Speaker 2 (34_two_way_databinding)

test server here initially.

1:26

S… Speaker 2 (34_two_way_databinding)

So before it was an empty string,

1:28

S… Speaker 2 (34_two_way_databinding)

now it isn't anymore.

1:30

S… Speaker 1 (34_two_way_databinding)

With this,

1:31

S… Speaker 2 (34_two_way_databinding)

if we go back to the running application,

1:33

S… Speaker 2 (34_two_way_databinding)

you see that the input is pre -populated with that.

1:37

S… Speaker 1 (34_two_way_databinding)

Now,

1:38

S… Speaker 2 (34_two_way_databinding)

if for demo purposes,

1:39

S… Speaker 2 (34_two_way_databinding)

I comment in the other input,

1:42

S… Speaker 2 (34_two_way_databinding)

which does not use two -way binding,

1:45

S… Speaker 2 (34_two_way_databinding)

you see that this input is empty because again,

1:47

S… Speaker 2 (34_two_way_databinding)

it's not using two -way binding.

1:49

S… Speaker 1 (34_two_way_databinding)

Now,

1:50

S… Speaker 2 (34_two_way_databinding)

if I type something here,

1:51

S… Speaker 2 (34_two_way_databinding)

you see it updates the property name and

1:55

S… Speaker 2 (34_two_way_databinding)

hence it updates it there where we use string interpolation and in the other

1:59

S… Speaker 1 (34_two_way_databinding)

input.

2:00

S… Speaker 2 (34_two_way_databinding)

But if I type here,

2:02

S… Speaker 2 (34_two_way_databinding)

it's not getting changed in the first input because again,

2:05

S… Speaker 2 (34_two_way_databinding)

we're not using two -way binding there.

2:08

S… Speaker 2 (34_two_way_databinding)

This is what two -way data binding is.

2:10

S… Speaker 2 (34_two_way_databinding)

A very simple way of binding in both directions and,

2:14

S… Speaker 2 (34_two_way_databinding)

for example,

2:15

S… Speaker 2 (34_two_way_databinding)

of reacting to changes in,

2:18

S… Speaker 2 (34_two_way_databinding)

well, the input value here.

2:20

S… Speaker 2 (34_two_way_databinding)

So I will comment out the first approach.

2:23

S… Speaker 2 (34_two_way_databinding)

I will leave the method in here,

2:25

S… Speaker 2 (34_two_way_databinding)

though, even though we're not calling it anymore.

2:27

S… Speaker 1 (34_two_way_databinding)

But with that,

2:28

S… Speaker 2 (34_two_way_databinding)

you now also had a look at two -way binding,

2:30

S… Speaker 2 (34_two_way_databinding)

a nice and easy way of reacting to events in both

2:34

S… Speaker 1 (34_two_way_databinding)

directions.

2:35

S… Speaker 1 (34_two_way_databinding)

Now...

2:37

S… Speaker 2 (34_two_way_databinding)

Let's fine -tune our app here a little bit more and let's then move

2:41

S… Speaker 2 (34_two_way_databinding)

on to directives,

2:42

S… Speaker 2 (34_two_way_databinding)

another core feature of Angular.

हे transcript AI (स्वयंचलित वक्तृत्व ओळख) द्वारे बनविले गेले आहे. त्रुटी असू शकते - गंभीर वापर करीता मूळ ऑडिओशी तुलना करा. AI करार

❤️ ला प्रेम करा STT.ai? आपल्या मित्रांना सांगा!

सारांश

या कोशाच्या संपादनासाठी त्यांनी एक स्वतंत्र कोशकार मंडळ स्थापन केले.

या प्रतविषयी AI ला विचारा

या योजनेत काही गोष्टींचा समावेश असतो - योजनेत सहभागी होण्यासाठी आवश्यक कागदपत्रे व माहिती.

दुसरे प्रतलेखन करा