21_creating_components_with_the_cli_nesting_components

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

Ce compte rendu expire aujourd'hui. Mise à niveau pour le stockage permanent →

Index des conférences

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.

Cette transcription a été générée par l'IA (reconnaissance automatique de la parole). Peut contenir des erreurs — vérifier par rapport à l'audio original pour une utilisation critique. Politique de l'IA

❤️ Vous aimez STT.ai ? Parlez-en à vos amis !

Résumé

Cliquez sur Résumer pour générer un résumé AI de cette transcription.

Demandez à l'IA à propos de cette transcription

Demandez quoi que ce soit au sujet de cette transcription — l'IA trouvera des sections pertinentes et des réponses.

Transcription d'un autre