26_what_is_databinding

Jul 13, 2026 07:16 · 2:49 · English · Whisper Turbo · 2 Oradores

Esta transcrição expira hoje. Atualização para armazenamento permanente →

Índice de Lecções

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.

Essa transcrição foi gerada pela IA (reconhecimento automático de fala). Pode conter erros — verificar contra o áudio original para uso crítico. Política de IA

❤️ Adora o STT.ai? Conte aos seus amigos!

Resumo

Clique em Summarize para gerar um resumo de IA desta transcrição.

Pergunte à IA sobre este Transcrito

Pergunte qualquer coisa sobre esta transcrição — a IA vai encontrar seções relevantes e resposta.

Transcrição Outro