26_what_is_databinding

Jul 13, 2026 07:16 · 2:49 · English · Whisper Turbo · 2 Qof-dheer

Qoraalkani wuxuu dhacayaa maanta. Kordhinta kaydinta joogtada ah →

Liiska Qoraalka

0:02

S… Speaker 1 (26_what_is_databinding)

In our little basic first application we're working on,

0:05

S… Speaker 1 (26_what_is_databinding)

where we added a couple of components,

0:07

S… Speaker 1 (26_what_is_databinding)

we covered a lot of key aspects of a basic Angular app,

0:10

S… Speaker 1 (26_what_is_databinding)

how it starts and how to use components,

0:12

S… Speaker 1 (26_what_is_databinding)

the base building block of any Angular app.

0:16

S… Speaker 2 (26_what_is_databinding)

But thus far,

0:18

S… Speaker 1 (26_what_is_databinding)

we only output static content,

0:21

S… Speaker 1 (26_what_is_databinding)

the server component here.

0:23

S… Speaker 2 (26_what_is_databinding)

That's not super interesting.

0:24

S… Speaker 1 (26_what_is_databinding)

We did even more than that in the first section of this course.

0:28

S… Speaker 2 (26_what_is_databinding)

So let's change this.

0:30

S… Speaker 1 (26_what_is_databinding)

to output some data which is kind of dynamic at least,

0:34

S… Speaker 1 (26_what_is_databinding)

which is not hard -coded into the template.

0:36

S… Speaker 1 (26_what_is_databinding)

Time for some data binding.

0:38

S… Speaker 1 (26_what_is_databinding)

What is data binding?

0:40

S… Speaker 1 (26_what_is_databinding)

You could basically translate data binding with communication.

0:44

S… Speaker 1 (26_what_is_databinding)

Communication between your TypeScript code of

0:48

S… Speaker 2 (26_what_is_databinding)

your component,

0:49

S… Speaker 1 (26_what_is_databinding)

your business logic,

0:50

S… Speaker 1 (26_what_is_databinding)

and the template,

0:51

S… Speaker 1 (26_what_is_databinding)

so what the user sees.

0:53

S… Speaker 1 (26_what_is_databinding)

Because you might have some result in your TypeScript code because you fetched something

0:57

S… Speaker 1 (26_what_is_databinding)

from a server or finished some calculation,

0:59

S… Speaker 1 (26_what_is_databinding)

which you want to display to the user.

1:02

S… Speaker 1 (26_what_is_databinding)

And the only thing the user sees is the template.

1:04

S… Speaker 1 (26_what_is_databinding)

So we need some kind of communication between both pieces to be

1:08

S… Speaker 2 (26_what_is_databinding)

able to really,

1:09

S… Speaker 1 (26_what_is_databinding)

well,

1:10

S… Speaker 1 (26_what_is_databinding)

do something in our app.

1:11

S… Speaker 1 (26_what_is_databinding)

That is where data binding comes into play because it is responsible for this communication.

1:16

S… Speaker 1 (26_what_is_databinding)

We get different ways of communication now.

1:19

S… Speaker 2 (26_what_is_databinding)

For example,

1:20

S… Speaker 1 (26_what_is_databinding)

we want to output data from our TypeScript code in the HTML

1:24

S… Speaker 1 (26_what_is_databinding)

code in the template.

1:25

S… Speaker 1 (26_what_is_databinding)

We can use string interpolation for this.

1:28

S… Speaker 1 (26_what_is_databinding)

You saw this in the first section of the course.

1:31

S… Speaker 1 (26_what_is_databinding)

It's the syntax with the double curly braces and then some property name or some expression

1:35

S… Speaker 1 (26_what_is_databinding)

in between.

1:35

S… Speaker 1 (26_what_is_databinding)

Or property binding.

1:38

S… Speaker 2 (26_what_is_databinding)

We will have a closer look at all these forms,

1:40

S… Speaker 1 (26_what_is_databinding)

of course, in the next lecture.

1:42

S… Speaker 1 (26_what_is_databinding)

So we will learn what this then is and how it works.

1:44

S… Speaker 1 (26_what_is_databinding)

The syntax basically uses these strange squared brackets around HTML

1:49

S… Speaker 1 (26_what_is_databinding)

attributes.

1:50

S… Speaker 1 (26_what_is_databinding)

But again,

1:50

S… Speaker 1 (26_what_is_databinding)

I will come back to this.

1:52

S… Speaker 1 (26_what_is_databinding)

Sometimes though,

1:53

S… Speaker 1 (26_what_is_databinding)

the other direction is interesting too.

1:56

S… Speaker 1 (26_what_is_databinding)

If the user clicks a button,

1:57

S… Speaker 1 (26_what_is_databinding)

you can kind of think of the user clicking this button on the template because

2:02

S… Speaker 1 (26_what_is_databinding)

again, the template is the thing with which the user interacts,

2:04

S… Speaker 1 (26_what_is_databinding)

which he sees and where he's also able to click buttons.

2:07

S… Speaker 2 (26_what_is_databinding)

So if we click a button,

2:09

S… Speaker 1 (26_what_is_databinding)

we maybe want to trigger something in our TypeScript code.

2:13

S… Speaker 1 (26_what_is_databinding)

So now we need the other direction.

2:15

S… Speaker 1 (26_what_is_databinding)

And we can get this other direction,

2:17

S… Speaker 1 (26_what_is_databinding)

we can react to user events with event binding.

2:20

S… Speaker 1 (26_what_is_databinding)

So we can bind to for example a click event to execute some

2:24

S… Speaker 2 (26_what_is_databinding)

code whenever it occurs.

2:26

S… Speaker 1 (26_what_is_databinding)

And we also have one additional form of data binding where

2:30

S… Speaker 1 (26_what_is_databinding)

we combine both directions,

2:32

S… Speaker 1 (26_what_is_databinding)

two -way data binding,

2:34

S… Speaker 1 (26_what_is_databinding)

where we are able to react events and output something at the

2:38

S… Speaker 1 (26_what_is_databinding)

same time.

2:39

S… Speaker 2 (26_what_is_databinding)

Might not be super clear how this works,

2:41

S… Speaker 1 (26_what_is_databinding)

but that is why we will now have a detailed look at all four forms

2:45

S… Speaker 1 (26_what_is_databinding)

in the next lectures.

Qoraalkan waxaa abuuray AI (u aqoonsiga hadalka otomaatiga ah). Waxay ku jiri kartaa khaladaad — xaqiijin ka dhanka ah audio asalka ah ee isticmaalka muhiimka ah. Xeerka AI

❤️ Jecel STT.ai? Ka warran saaxiibbadaa!

Qiyaas

Riix Summarize in ay soo saaraan AI faahfaahin ka mid ah qoraalkan.

Su'aal AI Ku saabsan this transcript

Su'aal wax kasta oo ku saabsan qoraalkan - AI ka heli doonaa qaybaha la xiriira iyo jawaab.

Ku dheji mid kale