27_string_interpolation

Jul 13, 2026 07:16 · 5:19 · English · Whisper Turbo · 2 Talare

Den här utskriften går ut idag. Uppgradering för permanent lagring →

Föreläsningsindex

0:02

S… Speaker 1 (27_string_interpolation)

Let's start by having a closer look at string interpolation.

0:05

S… Speaker 1 (27_string_interpolation)

Here in the server component,

0:08

S… Speaker 1 (27_string_interpolation)

I don't want to output this here in the HTML code

0:12

S… Speaker 1 (27_string_interpolation)

like this.

0:13

S… Speaker 1 (27_string_interpolation)

I don't want to hard code the output here.

0:15

S… Speaker 1 (27_string_interpolation)

It would be realistic that our server component contains

0:19

S… Speaker 1 (27_string_interpolation)

information about a specific server.

0:21

S… Speaker 1 (27_string_interpolation)

So maybe here in the template file,

0:24

S… Speaker 1 (27_string_interpolation)

we want to output server with ID

0:28

S… Speaker 1 (27_string_interpolation)

and then some

0:30

S… Speaker 1 (27_string_interpolation)

dynamic id here is and

0:35

S… Speaker 1 (27_string_interpolation)

then the status like offline so we have two dynamic fields here

0:39

S… Speaker 1 (27_string_interpolation)

now it would make sense to kind of derive them

0:43

S… Speaker 1 (27_string_interpolation)

in typescript code in a real app that might be derived from http

0:47

S… Speaker 1 (27_string_interpolation)

request you make to some back end or some calculation for

0:52

S… Speaker 1 (27_string_interpolation)

now i will hard code it in here so we might have a server

0:57

S… Speaker 1 (27_string_interpolation)

0:58

S… Speaker 1 (27_string_interpolation)

And I will assign a value of,

1:00

S… Speaker 1 (27_string_interpolation)

let's say, 10,

1:01

S… Speaker 1 (27_string_interpolation)

so a number.

1:02

S… Speaker 1 (27_string_interpolation)

And I might also have a server status,

1:06

S… Speaker 1 (27_string_interpolation)

which is a string offline.

1:09

S… Speaker 1 (27_string_interpolation)

So two different types,

1:11

S… Speaker 1 (27_string_interpolation)

a string and a number.

1:13

S… Speaker 1 (27_string_interpolation)

And though not necessary,

1:15

S… Speaker 1 (27_string_interpolation)

you could also be very explicit by assigning the type with TypeScripts

1:19

S… Speaker 1 (27_string_interpolation)

feature here of adding a colon after the property name and then the type.

1:23

S… Speaker 1 (27_string_interpolation)

It will infer it automatically though,

1:25

S… Speaker 1 (27_string_interpolation)

so this is not required.

1:26

S… Speaker 1 (27_string_interpolation)

I'm just doing this here for demo purposes.

1:28

S… Speaker 1 (27_string_interpolation)

So now I want to output these two properties in

1:33

S… Speaker 1 (27_string_interpolation)

my template.

1:33

S… Speaker 1 (27_string_interpolation)

And to get this connection,

1:35

S… Speaker 1 (27_string_interpolation)

we need data binding because you learned it's all about the communication between your types

1:40

S… Speaker 1 (27_string_interpolation)

root code and the template.

1:41

S… Speaker 2 (27_string_interpolation)

So,

1:42

S… Speaker 1 (27_string_interpolation)

string interpolation is a typical use case here or a typical solution

1:46

S… Speaker 1 (27_string_interpolation)

for this task here.

1:47

S… Speaker 1 (27_string_interpolation)

Instead of the placeholder,

1:50

S… Speaker 1 (27_string_interpolation)

I use my double curly braces,

1:53

S… Speaker 1 (27_string_interpolation)

opening and closing.

1:54

S… Speaker 1 (27_string_interpolation)

This is the string interpolation syntax.

1:56

S… Speaker 1 (27_string_interpolation)

And in between these double curly braces,

1:59

S… Speaker 1 (27_string_interpolation)

you can now write a TypeScript expression.

2:04

S… Speaker 1 (27_string_interpolation)

So the easiest expression is to simply reference a property

2:08

S… Speaker 1 (27_string_interpolation)

like the server ID.

2:10

S… Speaker 1 (27_string_interpolation)

And this is a common use case that you only output

2:15

S… Speaker 1 (27_string_interpolation)

a property here or the value of the property.

2:18

S… Speaker 1 (27_string_interpolation)

However,

2:19

S… Speaker 1 (27_string_interpolation)

it's not the only use case.

2:21

S… Speaker 1 (27_string_interpolation)

You could also,

2:23

S… Speaker 1 (27_string_interpolation)

for example,

2:24

S… Speaker 1 (27_string_interpolation)

here for server,

2:26

S… Speaker 1 (27_string_interpolation)

simply hardcode a string in there.

2:28

S… Speaker 1 (27_string_interpolation)

Any expression which can be resolved to a string in

2:32

S… Speaker 1 (27_string_interpolation)

the end.

2:32

S… Speaker 1 (27_string_interpolation)

That's the only condition for a string interpolation syntax here.

2:37

S… Speaker 1 (27_string_interpolation)

So whatever you have between the curly braces,

2:40

S… Speaker 1 (27_string_interpolation)

in the end,

2:41

S… Speaker 1 (27_string_interpolation)

it somehow has to return a string.

2:43

S… Speaker 1 (27_string_interpolation)

So you could also call a method here which returns a string in the end.

2:46

S… Speaker 1 (27_string_interpolation)

The only other restriction is you...

2:50

S… Speaker 1 (27_string_interpolation)

can't write multi -line expressions here.

2:52

S… Speaker 1 (27_string_interpolation)

You can't write block expressions in here.

2:55

S… Speaker 1 (27_string_interpolation)

So you can't add a if or a for control

2:59

S… Speaker 1 (27_string_interpolation)

structure in here.

3:00

S… Speaker 1 (27_string_interpolation)

You could use a ternary expression though.

3:02

S… Speaker 1 (27_string_interpolation)

So this is what you can do.

3:05

S… Speaker 1 (27_string_interpolation)

Now let's also replace the last placeholder.

3:08

S… Speaker 1 (27_string_interpolation)

And here I will again just reference a property,

3:11

S… Speaker 1 (27_string_interpolation)

the server status.

3:13

S… Speaker 1 (27_string_interpolation)

Now, this is string interpolation in usage and

3:18

S… Speaker 1 (27_string_interpolation)

you see that we have an expression which is a string itself and then two other expressions

3:22

S… Speaker 1 (27_string_interpolation)

which simply point to properties.

3:24

S… Speaker 1 (27_string_interpolation)

And again,

3:25

S… Speaker 1 (27_string_interpolation)

you could also call a method here which returns a string.

3:28

S… Speaker 2 (27_string_interpolation)

Now,

3:28

S… Speaker 1 (27_string_interpolation)

interesting,

3:29

S… Speaker 1 (27_string_interpolation)

the server ID is not a string but a number.

3:33

S… Speaker 1 (27_string_interpolation)

And I just said that string interpolation has to resolve

3:37

S… Speaker 1 (27_string_interpolation)

to a string in the end,

3:39

S… Speaker 1 (27_string_interpolation)

has to get a string in the end.

3:41

S… Speaker 1 (27_string_interpolation)

So let's see if this works.

3:43

S… Speaker 1 (27_string_interpolation)

If we save this with ng serve still running,

3:46

S… Speaker 1 (27_string_interpolation)

let's also change app server back to app servers to

3:50

S… Speaker 1 (27_string_interpolation)

make this work again.

3:51

S… Speaker 1 (27_string_interpolation)

We see server with ID 10 is offline.

3:55

S… Speaker 1 (27_string_interpolation)

We see it twice because we repeat this component and each component of course has the same

3:59

S… Speaker 1 (27_string_interpolation)

content, but we see that string interpolation is working and

4:03

S… Speaker 1 (27_string_interpolation)

that it especially

4:04

S… Speaker 1 (27_string_interpolation)

is also working here for our number.

4:08

S… Speaker 1 (27_string_interpolation)

So ID 10,

4:10

S… Speaker 1 (27_string_interpolation)

that is not an issue.

4:11

S… Speaker 1 (27_string_interpolation)

That is working fine because a number can be easily converted

4:15

S… Speaker 1 (27_string_interpolation)

into a string.

4:16

S… Speaker 1 (27_string_interpolation)

So yes,

4:18

S… Speaker 1 (27_string_interpolation)

you have to get a string in the end or something which can be converted

4:22

S… Speaker 1 (27_string_interpolation)

to a string to really be correct here.

4:25

S… Speaker 1 (27_string_interpolation)

This is how you can use string interpolation.

4:27

S… Speaker 1 (27_string_interpolation)

And now to really complete the example,

4:30

S… Speaker 1 (27_string_interpolation)

let's say the server status here.

4:32

S… Speaker 1 (27_string_interpolation)

is somehow returned in a method get server status

4:37

S… Speaker 1 (27_string_interpolation)

could be the method name this is how you define a method in typescript

4:41

S… Speaker 1 (27_string_interpolation)

so you might know this kind of method definition from other languages

4:45

S… Speaker 1 (27_string_interpolation)

and here we simply return this server status

4:51

S… Speaker 1 (27_string_interpolation)

So we return the property here.

4:53

S… Speaker 1 (27_string_interpolation)

We could, of course,

4:53

S… Speaker 1 (27_string_interpolation)

have accessed as it directly as we already did.

4:57

S… Speaker 1 (27_string_interpolation)

But just to demonstrate that you can call a method,

5:00

S… Speaker 1 (27_string_interpolation)

here I am calling a method.

5:02

S… Speaker 1 (27_string_interpolation)

GetServerStatus,

5:04

S… Speaker 1 (27_string_interpolation)

of course,

5:04

S… Speaker 1 (27_string_interpolation)

leads to the same output because,

5:06

S… Speaker 1 (27_string_interpolation)

again, all this method does is it returns us a string

5:10

S… Speaker 1 (27_string_interpolation)

in the end or something which can be converted to a string.

5:13

S… Speaker 1 (27_string_interpolation)

That is string interpolation in action.

Denna utskrift genererades av AI (automatisk taligenkänning). Kan innehålla fel — verifiera mot originalljudet för kritisk användning. Politik för AI

❤️ Älskar du STT.ai? Berätta för dina vänner!

Sammanfattning

Klicka på Summarize för att generera en AI sammanfattning av denna utskrift.

Fråga AI om detta Transcript

Fråga något om denna utskrift — AI kommer att hitta relevanta avsnitt och svar.

Skriv om en annan