22_working_with_component_templates

Jul 13, 2026 07:14 · 3:08 · English · Whisper Turbo · 1 Konekte

Transkript sa a ekspire jodi a. Ajoutè pou depo perpétuel →

Endèks lekti

0:02

S… Speaker 1 (22_working_with_component_templates)

Thus far,

0:03

S… Speaker 1 (22_working_with_component_templates)

we always use the external template file and

0:07

S… Speaker 1 (22_working_with_component_templates)

we haven't done anything regarding the styling of components.

0:10

S… Speaker 1 (22_working_with_component_templates)

Time to change both.

0:12

S… Speaker 1 (22_working_with_component_templates)

Now,

0:13

S… Speaker 1 (22_working_with_component_templates)

instead of using an external template file,

0:16

S… Speaker 1 (22_working_with_component_templates)

you can also use an inline template,

0:20

S… Speaker 1 (22_working_with_component_templates)

which means you define the HTML code in the TypeScript code.

0:24

S… Speaker 1 (22_working_with_component_templates)

Sounds strange?

0:25

S… Speaker 1 (22_working_with_component_templates)

Well, it's possible.

0:27

S… Speaker 1 (22_working_with_component_templates)

We can do this by simply going to our service

0:31

S… Speaker 1 (22_working_with_component_templates)

component here,

0:32

S… Speaker 1 (22_working_with_component_templates)

for example.

0:32

S… Speaker 1 (22_working_with_component_templates)

And right now we point to this HTML file here.

0:36

S… Speaker 1 (22_working_with_component_templates)

Now we can change template URL to template.

0:39

S… Speaker 1 (22_working_with_component_templates)

One of the two has to be present,

0:42

S… Speaker 1 (22_working_with_component_templates)

either a link to external template or just template to define

0:46

S… Speaker 1 (22_working_with_component_templates)

it in this file.

0:47

S… Speaker 1 (22_working_with_component_templates)

But each component needs to have a template.

0:50

S… Speaker 1 (22_working_with_component_templates)

This is the one property you have to have at all times.

0:55

S… Speaker 1 (22_working_with_component_templates)

So with that,

0:56

S… Speaker 1 (22_working_with_component_templates)

now I change it to template.

0:58

S… Speaker 1 (22_working_with_component_templates)

Now we can write our template code here.

1:01

S… Speaker 1 (22_working_with_component_templates)

So here we could now replicate app server

1:06

S… Speaker 1 (22_working_with_component_templates)

like this,

1:07

S… Speaker 1 (22_working_with_component_templates)

maybe twice.

1:09

S… Speaker 1 (22_working_with_component_templates)

We have to make sure that we don't wrap this line because this is not

1:13

S… Speaker 1 (22_working_with_component_templates)

supported in a default TypeScript string.

1:15

S… Speaker 1 (22_working_with_component_templates)

And if I now save this,

1:18

S… Speaker 1 (22_working_with_component_templates)

we see the same result as before.

1:20

S… Speaker 1 (22_working_with_component_templates)

So it looks like nothing changed and that is good in this case because we

1:24

S… Speaker 1 (22_working_with_component_templates)

tried to make it look like this,

1:26

S… Speaker 1 (22_working_with_component_templates)

but actually we did change the way we set up our template

1:30

S… Speaker 1 (22_working_with_component_templates)

here.

1:31

S… Speaker 1 (22_working_with_component_templates)

Now we're defining the HTML code in this same file.

1:34

S… Speaker 1 (22_working_with_component_templates)

And actually if you want to write multi -line strings here,

1:38

S… Speaker 1 (22_working_with_component_templates)

which you probably want if you add more HTML code to it,

1:41

S… Speaker 1 (22_working_with_component_templates)

you can switch from a normal string with single quotation marks to

1:46

S… Speaker 1 (22_working_with_component_templates)

using

1:47

S… Speaker 1 (22_working_with_component_templates)

backticks to use javascript template expressions to

1:51

S… Speaker 1 (22_working_with_component_templates)

be able to write multi -line strings in between there now so

1:55

S… Speaker 1 (22_working_with_component_templates)

now between the opening and closing back tick you may actually wrap the

2:00

S… Speaker 1 (22_working_with_component_templates)

line and now write your html code like

2:04

S… Speaker 1 (22_working_with_component_templates)

this

2:05

S… Speaker 1 (22_working_with_component_templates)

What should you use?

2:06

S… Speaker 1 (22_working_with_component_templates)

Should you use this approach here of using template or an external file?

2:10

S… Speaker 1 (22_working_with_component_templates)

It depends.

2:11

S… Speaker 1 (22_working_with_component_templates)

If you have not that much code,

2:14

S… Speaker 1 (22_working_with_component_templates)

not that much HTML code,

2:16

S… Speaker 1 (22_working_with_component_templates)

using an inline template like this might be fine.

2:19

S… Speaker 1 (22_working_with_component_templates)

Then you have all the logic in the TypeScript code,

2:21

S… Speaker 1 (22_working_with_component_templates)

and that is absolutely okay.

2:23

S… Speaker 1 (22_working_with_component_templates)

But as soon as you have,

2:24

S… Speaker 1 (22_working_with_component_templates)

let's say, more than three lines of code in the HTML part here in the template,

2:29

S… Speaker 1 (22_working_with_component_templates)

using an external file is a good idea to make it easier to follow

2:33

S… Speaker 1 (22_working_with_component_templates)

and easier to understand.

2:34

S… Speaker 1 (22_working_with_component_templates)

It is important,

2:36

S… Speaker 1 (22_working_with_component_templates)

though, to keep in mind that you can use this approach,

2:39

S… Speaker 1 (22_working_with_component_templates)

that you can inline your templates and very important that

2:44

S… Speaker 1 (22_working_with_component_templates)

you need to have at least a template in a component.

2:47

S… Speaker 1 (22_working_with_component_templates)

You can omit the selector.

2:50

S… Speaker 1 (22_working_with_component_templates)

You will later in the routing section learn a different way of loading components without

2:54

S… Speaker 1 (22_working_with_component_templates)

using their selector.

2:56

S… Speaker 1 (22_working_with_component_templates)

And you don't have to add styles,

2:58

S… Speaker 1 (22_working_with_component_templates)

but templates have to be present.

3:00

S… Speaker 1 (22_working_with_component_templates)

So that were templates.

3:02

S… Speaker 1 (22_working_with_component_templates)

Now let's have a look at these styles in the next lecture.

Transkript sa a te kreye pa AI (automatic speech recognition). Li ka gen erè — tcheke ak son orijinal la pou itilize kritik. Politik AI

❤️ Love STT.ai? Di zanmi ou yo!

Resume

Klike sou Remak pou kreye yon remak AI de transkript sa a.

Konbyen tan pou m' fè transkript la?

Mande nenpòt bagay sou transkript sa a - AI a pral jwenn seksyon ki enpòtan yo epi reponn.

Transkripte yon lòt