22_working_with_component_templates

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

Această transcriere expiră astăzi. Actualizarea pentru stocarea permanentă →

Indice de lecție

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.

Această transcriere a fost generată de AI (reconociune automată de vorbire). Poate conține erori — verificați împotriva audio-ului original pentru utilizare critică. Politica de asociere a aerului intern

❤️ Îți place STT.ai? Spune-le prietenilor tăi!

Rezumatul

Faceți clic pe Summarize pentru a genera un rezumat al IA a acestei transcripții.

Întreabă Al despre acest text

Întreabă orice despre această transcriere — IA va găsi secțiuni relevante și răspunsul.

Transcrie Altul