28_property_binding

Jul 13, 2026 07:18 · 6:34 · English · Whisper Turbo · 1 Mga Speaker

Ang transcript na ito ay magtatapos ngayon. Upgrade para sa permanenteng imbakan →

Talaan ng mga lektura

0:02

S… Speaker 1 (28_property_binding)

In the last lecture,

0:03

S… Speaker 1 (28_property_binding)

we had a look at string interpolation,

0:05

S… Speaker 1 (28_property_binding)

which is a great tool for outputting data in a template.

0:08

S… Speaker 1 (28_property_binding)

Now I want to have a look at property binding.

0:11

S… Speaker 1 (28_property_binding)

Now,

0:11

S… Speaker 1 (28_property_binding)

one important information right away,

0:13

S… Speaker 1 (28_property_binding)

there are a lot of times where you can either use

0:17

S… Speaker 1 (28_property_binding)

property binding or string interpolation.

0:19

S… Speaker 1 (28_property_binding)

And I will show what I mean in a second.

0:22

S… Speaker 1 (28_property_binding)

Let's go to our servers component where we manage all the servers.

0:26

S… Speaker 1 (28_property_binding)

And I want to allow the user to add new servers.

0:30

S… Speaker 1 (28_property_binding)

At least soon I want to allow that.

0:32

S… Speaker 1 (28_property_binding)

So we will need a button where I say add

0:36

S… Speaker 1 (28_property_binding)

server on it.

0:37

S… Speaker 1 (28_property_binding)

And I would just add some CSS classes button and button primary to make this

0:41

S… Speaker 1 (28_property_binding)

button look nice.

0:42

S… Speaker 1 (28_property_binding)

This is all using normal bootstrap CSS classes though.

0:46

S… Speaker 1 (28_property_binding)

Nothing to do with Angular.

0:47

S… Speaker 1 (28_property_binding)

And to reflect this change in my servers component here.

0:51

S… Speaker 1 (28_property_binding)

I also want to comment out the inline template and point to the external template

0:55

S… Speaker 1 (28_property_binding)

again.

0:56

S… Speaker 1 (28_property_binding)

So template URL should point to my servers

1:00

S… Speaker 1 (28_property_binding)

component dot HTML file like

1:04

S… Speaker 1 (28_property_binding)

this.

1:05

S… Speaker 1 (28_property_binding)

So now with this,

1:06

S… Speaker 1 (28_property_binding)

if I save this,

1:08

S… Speaker 1 (28_property_binding)

we see that button here.

1:09

S… Speaker 1 (28_property_binding)

Right now,

1:10

S… Speaker 1 (28_property_binding)

it doesn't make any sense that I'm able to click this button because it

1:14

S… Speaker 1 (28_property_binding)

doesn't do anything.

1:15

S… Speaker 1 (28_property_binding)

We haven't learned to react to a button click yet.

1:17

S… Speaker 1 (28_property_binding)

So I will add a new property in my TypeScript code

1:21

S… Speaker 1 (28_property_binding)

here.

1:22

S… Speaker 1 (28_property_binding)

which I'll name allow new server and set it to false.

1:27

S… Speaker 1 (28_property_binding)

So now this is also another property holding a Boolean value.

1:31

S… Speaker 1 (28_property_binding)

So true or false,

1:32

S… Speaker 1 (28_property_binding)

in this case false,

1:32

S… Speaker 1 (28_property_binding)

because I don't want to allow the user to create a new server.

1:36

S… Speaker 1 (28_property_binding)

And you could again imagine that this is somehow derived dynamically.

1:40

S… Speaker 1 (28_property_binding)

We will soon work with some dynamic data.

1:43

S… Speaker 1 (28_property_binding)

So in the HTML file here,

1:45

S… Speaker 1 (28_property_binding)

I now want to disable the button.

1:47

S… Speaker 1 (28_property_binding)

And as you probably know,

1:49

S… Speaker 1 (28_property_binding)

there is a disabled attribute you can add,

1:52

S… Speaker 1 (28_property_binding)

like this.

1:52

S… Speaker 1 (28_property_binding)

If we now save this,

1:54

S… Speaker 1 (28_property_binding)

the button is disabled,

1:55

S… Speaker 1 (28_property_binding)

I can't click it.

1:56

S… Speaker 1 (28_property_binding)

That's nice,

1:57

S… Speaker 1 (28_property_binding)

but that's hard -coded into HTML.

1:59

S… Speaker 1 (28_property_binding)

Now maybe this allow new server code

2:03

S… Speaker 1 (28_property_binding)

here changes,

2:04

S… Speaker 1 (28_property_binding)

however.

2:04

S… Speaker 1 (28_property_binding)

Maybe it's not set to this all the time.

2:07

S… Speaker 1 (28_property_binding)

So then we wouldn't be able to react to this.

2:10

S… Speaker 1 (28_property_binding)

And I can actually demonstrate this.

2:12

S… Speaker 1 (28_property_binding)

but for now in the constructor which is simply a method executed at the point of

2:16

S… Speaker 1 (28_property_binding)

time this component is created by angular

2:19

S… Speaker 1 (28_property_binding)

By there calling setTimeout a normal JavaScript function.

2:23

S… Speaker 1 (28_property_binding)

And here I define after which period of time or after

2:27

S… Speaker 1 (28_property_binding)

how many milliseconds something should happen.

2:29

S… Speaker 1 (28_property_binding)

So after 2000 milliseconds,

2:31

S… Speaker 1 (28_property_binding)

which are two seconds,

2:32

S… Speaker 1 (28_property_binding)

I want to execute a function.

2:34

S… Speaker 1 (28_property_binding)

And here I'm using an ES6 arrow function.

2:37

S… Speaker 1 (28_property_binding)

This syntax might look strange.

2:39

S… Speaker 1 (28_property_binding)

It's almost the same as function like this with

2:44

S… Speaker 1 (28_property_binding)

some difference when it comes to handling the this keyword.

2:48

S… Speaker 1 (28_property_binding)

But in the end,

2:48

S… Speaker 1 (28_property_binding)

here you pass the arguments and here you have the function body.

2:52

S… Speaker 1 (28_property_binding)

More importantly,

2:53

S… Speaker 1 (28_property_binding)

in here, I can set allow new server.

2:56

S… Speaker 1 (28_property_binding)

And now this would not work in the other syntax because this would then be referring

3:00

S… Speaker 1 (28_property_binding)

to something else.

3:01

S… Speaker 1 (28_property_binding)

Can set it to true.

3:02

S… Speaker 1 (28_property_binding)

So after two seconds,

3:04

S… Speaker 1 (28_property_binding)

this will be switched to true.

3:05

S… Speaker 1 (28_property_binding)

And since we hardcoded this,

3:06

S… Speaker 1 (28_property_binding)

of course,

3:07

S… Speaker 1 (28_property_binding)

this doesn't affect our button here at all.

3:09

S… Speaker 1 (28_property_binding)

It stays disabled.

3:11

S… Speaker 1 (28_property_binding)

So I want to bind it to allow new server.

3:15

S… Speaker 1 (28_property_binding)

So now to make this disabled functionality dynamic,

3:18

S… Speaker 1 (28_property_binding)

we can bind to it by enclosing it in square brackets.

3:22

S… Speaker 1 (28_property_binding)

Square brackets indicate to Angular that we're using property

3:27

S… Speaker 1 (28_property_binding)

binding, that we want to dynamically bind some property.

3:31

S… Speaker 1 (28_property_binding)

And disabled,

3:32

S… Speaker 1 (28_property_binding)

the HTML attribute,

3:34

S… Speaker 1 (28_property_binding)

in the end,

3:35

S… Speaker 1 (28_property_binding)

in normal HTML,

3:36

S… Speaker 1 (28_property_binding)

only sets a specific property on the underlying

3:40

S… Speaker 1 (28_property_binding)

DOM element.

3:42

S… Speaker 1 (28_property_binding)

You might know that each HTML element you use is parsed by the

3:46

S… Speaker 1 (28_property_binding)

browser and kind of translated into an element on the document object

3:50

S… Speaker 1 (28_property_binding)

model.

3:51

S… Speaker 1 (28_property_binding)

This is totally unrelated to Angular.

3:53

S… Speaker 1 (28_property_binding)

And therefore,

3:54

S… Speaker 1 (28_property_binding)

we have an element in this DOM.

3:57

S… Speaker 1 (28_property_binding)

And this element has a couple of properties.

4:00

S… Speaker 1 (28_property_binding)

A lot of these can't even be set through attributes on the HTML

4:04

S… Speaker 1 (28_property_binding)

element.

4:05

S… Speaker 1 (28_property_binding)

Well, one of the properties is the disabled property,

4:08

S… Speaker 1 (28_property_binding)

and you can set it through the disabled attribute,

4:10

S… Speaker 1 (28_property_binding)

but here we're not using the disabled attribute anymore.

4:13

S… Speaker 1 (28_property_binding)

With these squared brackets,

4:15

S… Speaker 1 (28_property_binding)

we are directly binding to this native disabled

4:20

S… Speaker 1 (28_property_binding)

property this HTML element has.

4:23

S… Speaker 1 (28_property_binding)

So now we can set this equal to,

4:26

S… Speaker 1 (28_property_binding)

and now between the quotation marks here,

4:29

S… Speaker 1 (28_property_binding)

an expression which for this property

4:32

S… Speaker 1 (28_property_binding)

resolves to a Boolean,

4:34

S… Speaker 1 (28_property_binding)

but for other properties,

4:36

S… Speaker 1 (28_property_binding)

another type might be required.

4:38

S… Speaker 1 (28_property_binding)

Because again,

4:39

S… Speaker 1 (28_property_binding)

you can bind to a lot of properties,

4:41

S… Speaker 1 (28_property_binding)

basically to all the HTML element properties.

4:45

S… Speaker 1 (28_property_binding)

we'll soon learn that there are also other properties you can bind to.

4:49

S… Speaker 1 (28_property_binding)

So for now I can simply pass allow new server here,

4:53

S… Speaker 1 (28_property_binding)

my property name,

4:54

S… Speaker 1 (28_property_binding)

because this will resolve to true or false exactly

4:58

S… Speaker 1 (28_property_binding)

the value disabled the property needs because it has to decide whether

5:03

S… Speaker 1 (28_property_binding)

it should be disabled or not.

5:04

S… Speaker 1 (28_property_binding)

So now with that,

5:05

S… Speaker 1 (28_property_binding)

if we

5:08

S… Speaker 1 (28_property_binding)

So by adding an exclamation mark,

5:10

S… Speaker 1 (28_property_binding)

we made sure that this is only disabled if this is false.

5:13

S… Speaker 1 (28_property_binding)

So if allow new server is not true,

5:17

S… Speaker 1 (28_property_binding)

otherwise we would do exactly the opposite.

5:19

S… Speaker 1 (28_property_binding)

So now with the exclamation mark,

5:21

S… Speaker 1 (28_property_binding)

if we go back to the app,

5:22

S… Speaker 1 (28_property_binding)

you see it's disabled.

5:24

S… Speaker 1 (28_property_binding)

but after two seconds let me reload this it becomes enabled because

5:28

S… Speaker 1 (28_property_binding)

now we're binding to this disabled property this native

5:32

S… Speaker 1 (28_property_binding)

element property we're binding this to our own typescript property

5:37

S… Speaker 1 (28_property_binding)

here and the convenient thing is and this is what angular

5:41

S… Speaker 1 (28_property_binding)

is all about that this will update dynamically so once

5:45

S… Speaker 1 (28_property_binding)

allow new server changes

5:48

S… Speaker 1 (28_property_binding)

This is changed in the DOM,

5:49

S… Speaker 1 (28_property_binding)

so now the button gets enabled.

5:51

S… Speaker 1 (28_property_binding)

One of the main reasons why you use Angular,

5:54

S… Speaker 1 (28_property_binding)

it makes it very easy for you to interact with your DOM

5:58

S… Speaker 1 (28_property_binding)

to change some things there at runtime,

6:01

S… Speaker 1 (28_property_binding)

like we do here.

6:02

S… Speaker 1 (28_property_binding)

That is property binding in place.

6:05

S… Speaker 1 (28_property_binding)

Now, as I mentioned,

6:06

S… Speaker 1 (28_property_binding)

besides binding to HTML element properties,

6:10

S… Speaker 1 (28_property_binding)

like we do here,

6:11

S… Speaker 1 (28_property_binding)

you can also bind to other properties,

6:13

S… Speaker 1 (28_property_binding)

for example,

6:14

S… Speaker 1 (28_property_binding)

of directives,

6:15

S… Speaker 1 (28_property_binding)

something we haven't learned about yet,

6:17

S… Speaker 1 (28_property_binding)

and your own components,

6:18

S… Speaker 1 (28_property_binding)

something I will also show you later.

6:20

S… Speaker 1 (28_property_binding)

So this is property binding.

6:22

S… Speaker 1 (28_property_binding)

Before moving on to the other two forms of data binding,

6:25

S… Speaker 1 (28_property_binding)

let's find out where you could actually use string interpolation

6:29

S… Speaker 1 (28_property_binding)

instead of property binding.

Ang transcript na ito ay ginawa ng AI (automatic speech recognition). Maaaring may mga pagkakamali — suriin ang orihinal na audio para sa kritikal na paggamit. Patakaran ng AI

❤️ Pag-ibig STT.ai? Sabihin sa iyong mga kaibigan!

Buod

I-click ang Summarize upang makabuo ng isang AI buod ng transcript na ito.

Magtanong sa AI Tungkol sa Transcript na Ito

Magtanong ng anumang bagay tungkol sa transcript na ito - ang AI ay makahanap ng mga kaugnay na mga seksyon at sagot.

Isalin ang isa pang