21_creating_components_with_the_cli_nesting_components

Jul 13, 2026 07:14 · 3:51 · English · Whisper Turbo · 2 Sprekers

Dit transcript verloopt vandaag. Upgrade voor permanente opslag →

Lezingenindex

0:02

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

In the last lectures,

0:03

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

we learned a lot,

0:04

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

including the creation of a new component by hand.

0:08

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

Now,

0:09

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

there also is an alternative to creating it manually.

0:11

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

When using the CLI,

0:13

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

you can open a new terminal window or command line,

0:16

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

leave the ng -serve window running,

0:18

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

that's important,

0:19

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

don't close it.

0:19

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

And in this new window,

0:21

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

we can use some CLI command to also create a new

0:25

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

component.

0:26

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

Let's say we want to have our single server component

0:30

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

here.

0:30

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

in another component,

0:32

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

so nested into another component,

0:34

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

a service,

0:36

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

multiple servers component.

0:38

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

We can create this manually by adding a service folder

0:43

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

with our component,

0:44

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

or we use the CLI with ng,

0:46

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

and there we have a generate command,

0:50

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

which allows us to generate some elements,

0:53

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

some elements supported by Angular.

0:56

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

one such element is a component so we can create a new component

1:00

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

with ng generate component and then passing the name servers

1:05

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

like this you can also use a shortcut and

1:10

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

instead of ng generate component you could say ng g

1:14

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

c which does the same

1:17

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

So if you hit enter,

1:18

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

what this will do is it will give you a new folder in your app folder with

1:23

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

the name of your component,

1:24

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

servers,

1:25

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

and in there you basically find the same files as you had for the app

1:29

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

component.

1:29

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

HTML,

1:30

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

CSS, TS,

1:32

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

and this spec file,

1:34

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

which basically is used for testing.

1:36

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

Now I will remove this.

1:38

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

We'll later have a section about testing.

1:41

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

And we'll have a look at the styling later too.

1:44

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

For now,

1:45

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

let's say it is in this servers component that we want

1:49

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

to output our single server.

1:52

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

Well,

1:53

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

we already have this decorator,

1:55

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

the selector,

1:56

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

app server.

1:57

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

So in this template of the service component,

2:00

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

we can overwrite the default text with app server and

2:05

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

maybe simply replicate this so that we have two components because remember,

2:09

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

components are reusable.

2:10

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

We can use the same component as often as we want by simply using

2:14

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

its selector as often as we want.

2:17

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

So now we have two servers here.

2:19

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

And with this in our service component,

2:23

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

you need to make sure that you also update the app module.

2:27

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

Now the CLI should do this automatically,

2:29

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

which is why you already find the import and the declaration in this

2:33

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

file.

2:34

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

But make sure you really do have it here.

2:36

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

With this,

2:38

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

we can go to our service component TypeScript file to check the

2:42

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

selector, which is app -service.

2:45

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

And then we can go to our app component HTML

2:49

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

file and update the selector to use this new component instead of

2:53

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

the old one.

2:54

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

With this,

2:55

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

if we now save this and go back to our application,

2:58

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

it looks almost the same as before.

3:00

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

We see our single server component twice.

3:03

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

But if we inspect the code here in the

3:07

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

developer tools of Chrome,

3:08

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

for example,

3:09

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

you see that we have this outer app.

3:13

S… Speaker 1 (21_creating_components_with_the_cli_nesting_components)

servers component,

3:14

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

this newly created component,

3:15

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

and in between we have two single app server components.

3:20

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

So with that,

3:21

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

we learned a couple of important things about how to create components manually or

3:25

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

with the CLI,

3:26

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

how we can nest them into each other,

3:28

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

that we can use component selectors in any other template of any other

3:33

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

component, and

3:35

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

how we can replicate components by simply using them,

3:38

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

well, multiple times using their selectors multiple times.

3:42

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

Let's dive into how we can actually style them,

3:45

S… Speaker 2 (21_creating_components_with_the_cli_nesting_components)

what you can do regarding the style and the template of components.

Dit transcript werd gegenereerd door AI (automatische spraakherkenning). Kan fouten bevatten..verifieer tegen de oorspronkelijke audio voor kritisch gebruik. AI-beleid

❤️ Hou je van STT.ai? Vertel het je vrienden!

Samenvatting

Klik op Summarize om een AI samenvatting van dit transcript te genereren.

Vraag AI over dit Transcript

Vraag maar iets over dit transcript De AI zal relevante secties en antwoord vinden.

Een andere transcriberen