29_property_binding_vs_string_interpolation

Jul 13, 2026 07:18 · 3:07 · English · Whisper Turbo · 2 Qof-dheer

Qoraalkani wuxuu dhacayaa maanta. Kordhinta kaydinta joogtada ah →

Liiska Qoraalka

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.

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