29_property_binding_vs_string_interpolation

Jul 13, 2026 07:18 · 3:07 · English · Whisper Turbo · 2 ลำโพง

ใบรับรองนี้หมดอายุในวันนี้ ปรับปรุงสำหรับเก็บข้อมูลถาวร →

ดัชนีการเรียนการสอน

0:02

S… Speaker 1 (29_property_binding_vs_string_interpolation)

In the last lecture,

0:03

S… Speaker 1 (29_property_binding_vs_string_interpolation)

we learned about property binding.

0:05

S… Speaker 1 (29_property_binding_vs_string_interpolation)

Now,

0:05

S… Speaker 1 (29_property_binding_vs_string_interpolation)

if we had the use case that we also want to output the current value of

0:10

S… Speaker 1 (29_property_binding_vs_string_interpolation)

allow new server,

0:11

S… Speaker 1 (29_property_binding_vs_string_interpolation)

we could of course use string interpolation to simply output allow

0:15

S… Speaker 1 (29_property_binding_vs_string_interpolation)

new server and a Boolean can also be cast into a string.

0:19

S… Speaker 1 (29_property_binding_vs_string_interpolation)

So now we see false here and after two seconds,

0:22

S… Speaker 1 (29_property_binding_vs_string_interpolation)

you see this change to true because we change it in the code.

0:25

S… Speaker 1 (29_property_binding_vs_string_interpolation)

Nice.

0:25

S… Speaker 1 (29_property_binding_vs_string_interpolation)

Now this is one of the cases here where you can easily use

0:30

S… Speaker 1 (29_property_binding_vs_string_interpolation)

property binding instead of string interpolation.

0:32

S… Speaker 1 (29_property_binding_vs_string_interpolation)

So you could simply bind to a property of this

0:37

S… Speaker 1 (29_property_binding_vs_string_interpolation)

element, the inner text property.

0:42

S… Speaker 1 (29_property_binding_vs_string_interpolation)

And set this equal to allow new server.

0:44

S… Speaker 1 (29_property_binding_vs_string_interpolation)

Now I can remove the string interpolation here inside of the tags.

0:48

S… Speaker 1 (29_property_binding_vs_string_interpolation)

And whilst they might look empty now,

0:50

S… Speaker 2 (29_property_binding_vs_string_interpolation)

well,

0:51

S… Speaker 1 (29_property_binding_vs_string_interpolation)

we set the inner text so we get the same behavior as before.

0:53

S… Speaker 1 (29_property_binding_vs_string_interpolation)

Because the inner text property of element is just what's

0:58

S… Speaker 1 (29_property_binding_vs_string_interpolation)

between the opening and closing tag.

0:59

S… Speaker 1 (29_property_binding_vs_string_interpolation)

So in this case,

1:00

S… Speaker 1 (29_property_binding_vs_string_interpolation)

we were able to easily replace string interpolation with property

1:05

S… Speaker 1 (29_property_binding_vs_string_interpolation)

binding.

1:05

S… Speaker 1 (29_property_binding_vs_string_interpolation)

So when should you use which of the two?

1:08

S… Speaker 1 (29_property_binding_vs_string_interpolation)

Well, basically,

1:09

S… Speaker 1 (29_property_binding_vs_string_interpolation)

if you want to output something in your template,

1:12

S… Speaker 1 (29_property_binding_vs_string_interpolation)

print some text to it,

1:13

S… Speaker 1 (29_property_binding_vs_string_interpolation)

use string interpolation.

1:14

S… Speaker 1 (29_property_binding_vs_string_interpolation)

If you want to change some property,

1:17

S… Speaker 1 (29_property_binding_vs_string_interpolation)

be that of a HTML element or,

1:20

S… Speaker 1 (29_property_binding_vs_string_interpolation)

as you will later learn,

1:21

S… Speaker 1 (29_property_binding_vs_string_interpolation)

of a directive or a component,

1:23

S… Speaker 1 (29_property_binding_vs_string_interpolation)

typically use property binding.

1:25

S… Speaker 1 (29_property_binding_vs_string_interpolation)

That is how you can differentiate it.

1:27

S… Speaker 1 (29_property_binding_vs_string_interpolation)

And you will get a feeling for this once you work your way through the course

1:31

S… Speaker 1 (29_property_binding_vs_string_interpolation)

project and so on.

1:32

S… Speaker 1 (29_property_binding_vs_string_interpolation)

So this is this.

1:34

S… Speaker 1 (29_property_binding_vs_string_interpolation)

One important note I want to make is don't mix.

1:38

S… Speaker 1 (29_property_binding_vs_string_interpolation)

property binding and string interpolation you might notice

1:42

S… Speaker 1 (29_property_binding_vs_string_interpolation)

that here we have disabled equals and then we have quotation marks

1:46

S… Speaker 1 (29_property_binding_vs_string_interpolation)

and then directly our property name there

1:50

S… Speaker 1 (29_property_binding_vs_string_interpolation)

are no curly braces between these quotation marks and there

1:54

S… Speaker 1 (29_property_binding_vs_string_interpolation)

shouldn't be because that will break the app this will not work between

1:59

S… Speaker 1 (29_property_binding_vs_string_interpolation)

the quotation marks of property binding you can and you must

2:03

S… Speaker 1 (29_property_binding_vs_string_interpolation)

already write

2:05

S… Speaker 1 (29_property_binding_vs_string_interpolation)

TypeScript code,

2:06

S… Speaker 1 (29_property_binding_vs_string_interpolation)

so to say, a TypeScript expression,

2:07

S… Speaker 1 (29_property_binding_vs_string_interpolation)

which will return the value this property expects.

2:10

S… Speaker 1 (29_property_binding_vs_string_interpolation)

So for disabled,

2:11

S… Speaker 1 (29_property_binding_vs_string_interpolation)

some expression which returns true or false.

2:14

S… Speaker 1 (29_property_binding_vs_string_interpolation)

So just like with string interpolation,

2:16

S… Speaker 1 (29_property_binding_vs_string_interpolation)

you may also call a method there,

2:18

S… Speaker 1 (29_property_binding_vs_string_interpolation)

but you must not add curly braces in there.

2:20

S… Speaker 1 (29_property_binding_vs_string_interpolation)

Whilst it might look we simply use a HTML attribute

2:24

S… Speaker 1 (29_property_binding_vs_string_interpolation)

there, we aren't.

2:26

S… Speaker 1 (29_property_binding_vs_string_interpolation)

This whole syntax here.

2:28

S… Speaker 1 (29_property_binding_vs_string_interpolation)

is a syntax recognized by Angular.

2:30

S… Speaker 1 (29_property_binding_vs_string_interpolation)

So this is why between the quotation marks,

2:32

S… Speaker 1 (29_property_binding_vs_string_interpolation)

you can already,

2:33

S… Speaker 1 (29_property_binding_vs_string_interpolation)

and you have already,

2:35

S… Speaker 1 (29_property_binding_vs_string_interpolation)

you have to write TypeScript code because again,

2:38

S… Speaker 1 (29_property_binding_vs_string_interpolation)

this whole expression is evaluated by Angular.

2:41

S… Speaker 1 (29_property_binding_vs_string_interpolation)

Mixing in string interpolation will break it.

2:44

S… Speaker 1 (29_property_binding_vs_string_interpolation)

String interpolation only works in a normal template,

2:47

S… Speaker 1 (29_property_binding_vs_string_interpolation)

not within another expression of that template,

2:51

S… Speaker 1 (29_property_binding_vs_string_interpolation)

not within property binding or something like this.

2:55

S… Speaker 1 (29_property_binding_vs_string_interpolation)

With that enough about property binding and generally about outputting

3:00

S… Speaker 1 (29_property_binding_vs_string_interpolation)

data in the template,

3:01

S… Speaker 1 (29_property_binding_vs_string_interpolation)

let's see how we can react to events.

ข้อความที่แปลเป็นภาษาอังกฤษนี้ถูกสร้างขึ้นโดย AI (การรับรู้เสียงอัตโนมัติ) อาจมีข้อผิดพลาด - ตรวจสอบกับเสียงต้นฉบับเพื่อใช้อย่างสำคัญ ข้อกำหนด AI

❤️ ชอบ STT.ai ไหม? บอกต่อเพื่อน ๆ ของคุณสิ!

สรุป

คลิกที่ ทำสรุป เพื่อสร้างสรุป AI ของการแปลนี้

ถาม AI เกี่ยวกับการแปลนี้

ถามอะไรก็ได้เกี่ยวกับบทบันทึกนี้ เอไอจะหาส่วนที่เกี่ยวข้องและตอบ

เขียนแปลงอีก