51. Creating the Components

0:02

S… Speaker 1 (51. Creating the Components)

So in the last lecture,

0:03

S… Speaker 1 (51. Creating the Components)

we set up our project and we added Bootstrap to it.

0:06

S… Speaker 1 (51. Creating the Components)

Now I want to get started adding the components we laid out here.

0:09

S… Speaker 1 (51. Creating the Components)

Here's your challenge.

0:11

S… Speaker 1 (51. Creating the Components)

Try doing this on your own.

0:13

S… Speaker 1 (51. Creating the Components)

Now with that,

0:14

S… Speaker 1 (51. Creating the Components)

I don't mean filling these component templates with live.

0:17

S… Speaker 1 (51. Creating the Components)

For now, each component may simply hold some dummy text so that we can see that

0:21

S… Speaker 1 (51. Creating the Components)

it's there.

0:21

S… Speaker 1 (51. Creating the Components)

I mean,

0:22

S… Speaker 1 (51. Creating the Components)

create the components and try to create a clever folder

0:27

S… Speaker 1 (51. Creating the Components)

structure in your app folder.

0:29

S… Speaker 1 (51. Creating the Components)

Not every component should have a folder on the root level.

0:33

S… Speaker 1 (51. Creating the Components)

You should also nest them by feature maybe.

0:35

S… Speaker 1 (51. Creating the Components)

And try to create at least one component manually,

0:39

S… Speaker 1 (51. Creating the Components)

by hand,

0:40

S… Speaker 1 (51. Creating the Components)

not using the CLI.

0:41

S… Speaker 1 (51. Creating the Components)

I'll give you a chance to pause the video and then I will show you my approach.

0:45

S… Speaker 1 (51. Creating the Components)

Chances are that we deviate in our solution,

0:48

S… Speaker 1 (51. Creating the Components)

but that's a good practice for you.

0:50

S… Speaker 1 (51. Creating the Components)

So definitely go ahead and try creating these components without any content

0:54

S… Speaker 1 (51. Creating the Components)

in it for now on your own.

0:59

S… Speaker 1 (51. Creating the Components)

So were you successful?

1:01

S… Speaker 1 (51. Creating the Components)

Let's see how I would solve this,

1:03

S… Speaker 1 (51. Creating the Components)

how I would approach this.

1:05

S… Speaker 1 (51. Creating the Components)

We got two main areas,

1:07

S… Speaker 1 (51. Creating the Components)

recipes in the shopping list,

1:09

S… Speaker 1 (51. Creating the Components)

and we got this header component.

1:10

S… Speaker 1 (51. Creating the Components)

Now I will create the header component manually.

1:15

S… Speaker 1 (51. Creating the Components)

So for this,

1:16

S… Speaker 1 (51. Creating the Components)

we can already start the discussions.

1:18

S… Speaker 1 (51. Creating the Components)

Should we create a header folder in the app folder where we store this

1:22

S… Speaker 1 (51. Creating the Components)

component or should we create the component in the app

1:26

S… Speaker 1 (51. Creating the Components)

folder itself?

1:27

S… Speaker 1 (51. Creating the Components)

Now I will create a header folder but placing the component directly in the app

1:31

S… Speaker 1 (51. Creating the Components)

folder would also not be wrong since it is really only used by

1:35

S… Speaker 1 (51. Creating the Components)

our app component.

1:36

S… Speaker 1 (51. Creating the Components)

So here I will create this new folder named header and

1:40

S… Speaker 1 (51. Creating the Components)

in there I'll add my header .component .ts file.

1:46

S… Speaker 1 (51. Creating the Components)

Now, as you learned,

1:47

S… Speaker 1 (51. Creating the Components)

a component is simply just a TypeScript class.

1:49

S… Speaker 1 (51. Creating the Components)

So let's name it header component here.

1:52

S… Speaker 1 (51. Creating the Components)

And right now that would not be recognized as a component by

1:56

S… Speaker 1 (51. Creating the Components)

Angular.

1:57

S… Speaker 1 (51. Creating the Components)

Instead,

1:58

S… Speaker 1 (51. Creating the Components)

here,

1:59

S… Speaker 1 (51. Creating the Components)

we have to add the add component decorator.

2:03

S… Speaker 1 (51. Creating the Components)

And later,

2:04

S… Speaker 1 (51. Creating the Components)

I'm going to use the auto import feature of my IDE.

2:07

S… Speaker 1 (51. Creating the Components)

For now,

2:07

S… Speaker 1 (51. Creating the Components)

I'll import it manually.

2:09

S… Speaker 1 (51. Creating the Components)

We have to import component between curly braces

2:13

S… Speaker 1 (51. Creating the Components)

from add angular core.

2:16

S… Speaker 1 (51. Creating the Components)

That's important.

2:18

S… Speaker 1 (51. Creating the Components)

Now with that,

2:19

S… Speaker 1 (51. Creating the Components)

we need to pass a JavaScript object to this decorator to configure this component.

2:23

S… Speaker 1 (51. Creating the Components)

Specifically,

2:24

S… Speaker 1 (51. Creating the Components)

we need to add a template,

2:26

S… Speaker 1 (51. Creating the Components)

and I'll put this in external file,

2:28

S… Speaker 1 (51. Creating the Components)

so template URL in this case,

2:30

S… Speaker 1 (51. Creating the Components)

and a selector so that we can use this component.

2:34

S… Speaker 1 (51. Creating the Components)

So the selector here is app header because I want to ensure that

2:38

S… Speaker 1 (51. Creating the Components)

I have a unique selector and that I don't overwrite an existing HTML

2:43

S… Speaker 1 (51. Creating the Components)

element,

2:43

S… Speaker 1 (51. Creating the Components)

for example, and header would be an existing element.

2:47

S… Speaker 1 (51. Creating the Components)

The template URL,

2:48

S… Speaker 1 (51. Creating the Components)

here I want to point to the header .component .html

2:53

S… Speaker 1 (51. Creating the Components)

file.

2:54

S… Speaker 1 (51. Creating the Components)

And as you probably recognized,

2:56

S… Speaker 1 (51. Creating the Components)

this file doesn't exist.

2:58

S… Speaker 1 (51. Creating the Components)

So I can quickly create this by creating a new file in

3:02

S… Speaker 1 (51. Creating the Components)

the same folder,

3:02

S… Speaker 1 (51. Creating the Components)

in the header folder.

3:03

S… Speaker 1 (51. Creating the Components)

Here,

3:04

S… Speaker 1 (51. Creating the Components)

header .component .html is the full file name.

3:08

S… Speaker 1 (51. Creating the Components)

And in this HTML file here,

3:10

S… Speaker 1 (51. Creating the Components)

I simply want to output the header for now.

3:14

S… Speaker 1 (51. Creating the Components)

I'm going to add some content soon.

3:17

S… Speaker 1 (51. Creating the Components)

So that's my header component.

3:18

S… Speaker 1 (51. Creating the Components)

And I can already include this in my app component,

3:21

S… Speaker 1 (51. Creating the Components)

maybe above the container because in the container,

3:24

S… Speaker 1 (51. Creating the Components)

I later only want to contain my content component,

3:29

S… Speaker 1 (51. Creating the Components)

I will say.

3:30

S… Speaker 1 (51. Creating the Components)

So here I'll add the app header just like this.

3:34

S… Speaker 1 (51. Creating the Components)

So with that,

3:35

S… Speaker 1 (51. Creating the Components)

we added it here.

3:36

S… Speaker 1 (51. Creating the Components)

Now let's see if we can see it.

3:40

S… Speaker 1 (51. Creating the Components)

And I just see loading dot dot dot,

3:42

S… Speaker 1 (51. Creating the Components)

which always is an indicator that there has been an error.

3:46

S… Speaker 1 (51. Creating the Components)

So check the JavaScript console in your developer tools to see the error.

3:50

S… Speaker 1 (51. Creating the Components)

And the error is pretty clear,

3:51

S… Speaker 1 (51. Creating the Components)

app header is not a known element.

3:55

S… Speaker 1 (51. Creating the Components)

This is a common gotcha,

3:56

S… Speaker 1 (51. Creating the Components)

which is why I wanted to show it.

3:58

S… Speaker 1 (51. Creating the Components)

Why is it not known?

3:59

S… Speaker 1 (51. Creating the Components)

We added it here and we set up the selector here,

4:02

S… Speaker 1 (51. Creating the Components)

right? Well,

4:03

S… Speaker 1 (51. Creating the Components)

remember,

4:04

S… Speaker 1 (51. Creating the Components)

you have to register all the features you're going to use in the app module.

4:08

S… Speaker 1 (51. Creating the Components)

And since we didn't use the CLI to create this component,

4:12

S… Speaker 1 (51. Creating the Components)

it wasn't added there automatically.

4:13

S… Speaker 1 (51. Creating the Components)

So we have to add it manually to our declarations

4:18

S… Speaker 1 (51. Creating the Components)

array.

4:18

S… Speaker 1 (51. Creating the Components)

And that means we also have to add the import.

4:21

S… Speaker 1 (51. Creating the Components)

So we should import

4:23

S… Speaker 1 (51. Creating the Components)

header component from and now pointing to

4:27

S… Speaker 1 (51. Creating the Components)

the header folder and then in there the header component file

4:31

S… Speaker 1 (51. Creating the Components)

without the file extension.

4:33

S… Speaker 1 (51. Creating the Components)

So that now unlocks the header component in

4:38

S… Speaker 1 (51. Creating the Components)

our app and if we save this

4:40

S… Speaker 1 (51. Creating the Components)

Now we see the header.

4:42

S… Speaker 1 (51. Creating the Components)

Now that's not pretty.

4:43

S… Speaker 1 (51. Creating the Components)

We're going to change this soon,

4:45

S… Speaker 1 (51. Creating the Components)

but we can see that it is working.

4:47

S… Speaker 1 (51. Creating the Components)

Now let's move on to adding all the other components

4:51

S… Speaker 1 (51. Creating the Components)

with the CLI for now.

4:53

S… Speaker 1 (51. Creating the Components)

So we had a couple of components we wanted to add and I will use

4:57

S… Speaker 1 (51. Creating the Components)

the ng generate command or just ng as

5:01

S… Speaker 1 (51. Creating the Components)

a shortcut.

5:02

S… Speaker 1 (51. Creating the Components)

And then we want to generate a component or just C as

5:06

S… Speaker 1 (51. Creating the Components)

a shortcut.

5:07

S… Speaker 1 (51. Creating the Components)

And the first component I want to add is the recipes component for

5:11

S… Speaker 1 (51. Creating the Components)

this recipes feature area.

5:13

S… Speaker 1 (51. Creating the Components)

I'll add spec false to prevent the creation

5:17

S… Speaker 1 (51. Creating the Components)

of a testing file,

5:18

S… Speaker 1 (51. Creating the Components)

which I don't need.

5:19

S… Speaker 1 (51. Creating the Components)

So with that,

5:21

S… Speaker 1 (51. Creating the Components)

we get a new folder in our app folder,

5:24

S… Speaker 1 (51. Creating the Components)

the recipes folder,

5:25

S… Speaker 1 (51. Creating the Components)

which holds our recipes component.

5:27

S… Speaker 1 (51. Creating the Components)

That is great.

5:29

S… Speaker 1 (51. Creating the Components)

Now,

5:30

S… Speaker 1 (51. Creating the Components)

this will be our overall recipes feature component.

5:35

S… Speaker 1 (51. Creating the Components)

And that actually is a component I didn't sketch out here.

5:38

S… Speaker 1 (51. Creating the Components)

Here we only have recipe list item and detail.

5:40

S… Speaker 1 (51. Creating the Components)

Now you could also just work with these,

5:43

S… Speaker 1 (51. Creating the Components)

but I want to create a setup where I have list on the left,

5:47

S… Speaker 1 (51. Creating the Components)

let's say.

5:47

S… Speaker 1 (51. Creating the Components)

And if I click an item,

5:49

S… Speaker 1 (51. Creating the Components)

the detail component is displayed on the right.

5:51

S… Speaker 1 (51. Creating the Components)

So I will need an overall component holding both.

5:55

S… Speaker 1 (51. Creating the Components)

Now that is an optional setup.

5:56

S… Speaker 1 (51. Creating the Components)

You can also go with another one where the detail is somehow embedded

6:01

S… Speaker 1 (51. Creating the Components)

into the list component.

6:02

S… Speaker 1 (51. Creating the Components)

I chose

6:04

S… Speaker 1 (51. Creating the Components)

to create this overall component.

6:06

S… Speaker 1 (51. Creating the Components)

Now,

6:07

S… Speaker 1 (51. Creating the Components)

besides that,

6:08

S… Speaker 1 (51. Creating the Components)

I will go ahead and create the other components though.

6:11

S… Speaker 1 (51. Creating the Components)

So besides recipes,

6:13

S… Speaker 1 (51. Creating the Components)

I will also now create the recipe list component as laid out

6:17

S… Speaker 1 (51. Creating the Components)

on the slides.

6:18

S… Speaker 1 (51. Creating the Components)

Now here,

6:19

S… Speaker 1 (51. Creating the Components)

I don't want to create the recipe list on the or inside the app

6:23

S… Speaker 1 (51. Creating the Components)

folder though,

6:24

S… Speaker 1 (51. Creating the Components)

which is the default behavior by the CLI if I now would hit enter.

6:27

S… Speaker 1 (51. Creating the Components)

Instead,

6:29

S… Speaker 1 (51. Creating the Components)

that should go inside the recipes folder because that is where all the

6:33

S… Speaker 1 (51. Creating the Components)

recipe related components should go.

6:35

S… Speaker 1 (51. Creating the Components)

We can easily tell the CLI to create this component in a subfolder

6:39

S… Speaker 1 (51. Creating the Components)

by basically passing a path here.

6:42

S… Speaker 1 (51. Creating the Components)

So instead of just saying recipe list,

6:44

S… Speaker 1 (51. Creating the Components)

we can say recipes slash recipe list.

6:48

S… Speaker 1 (51. Creating the Components)

And since we already have the recipes folder,

6:50

S… Speaker 1 (51. Creating the Components)

this will create the recipes list folder inside of the recipes

6:55

S… Speaker 1 (51. Creating the Components)

folder.

6:55

S… Speaker 1 (51. Creating the Components)

That is what I meant with structuring the folders by

6:59

S… Speaker 1 (51. Creating the Components)

feature.

7:01

S… Speaker 1 (51. Creating the Components)

Now with the recipe list added,

7:04

S… Speaker 1 (51. Creating the Components)

I also want to add the recipe detail here because

7:08

S… Speaker 1 (51. Creating the Components)

the recipe detail should be displayed next to the list in my

7:12

S… Speaker 1 (51. Creating the Components)

setup here.

7:13

S… Speaker 1 (51. Creating the Components)

So I will add it to the recipes folder too so that now

7:17

S… Speaker 1 (51. Creating the Components)

we also have the recipe detail folder here.

7:20

S… Speaker 1 (51. Creating the Components)

And we also need a component for a single recipe item,

7:24

S… Speaker 1 (51. Creating the Components)

right? So recipe item.

7:27

S… Speaker 1 (51. Creating the Components)

However,

7:28

S… Speaker 1 (51. Creating the Components)

I don't want to add that to the recipes folder.

7:31

S… Speaker 1 (51. Creating the Components)

That should go inside the recipe list folder because

7:35

S… Speaker 1 (51. Creating the Components)

it's in the recipe list where I want to,

7:39

S… Speaker 1 (51. Creating the Components)

well, also have that item.

7:40

S… Speaker 1 (51. Creating the Components)

So I'll point to the recipe list subfolder here and

7:44

S… Speaker 1 (51. Creating the Components)

now hit enter.

7:45

S… Speaker 1 (51. Creating the Components)

And now we got the component inside the recipe list.

7:49

S… Speaker 1 (51. Creating the Components)

because again,

7:49

S… Speaker 1 (51. Creating the Components)

a recipe item is just one item in this list of recipes.

7:53

S… Speaker 1 (51. Creating the Components)

Now again,

7:55

S… Speaker 1 (51. Creating the Components)

it's only one possible folder structure.

7:57

S… Speaker 1 (51. Creating the Components)

You could remove the recipes component and put recipe

8:01

S… Speaker 1 (51. Creating the Components)

list component as the main recipe feature component and

8:05

S… Speaker 1 (51. Creating the Components)

add details somewhere in this component then.

8:07

S… Speaker 1 (51. Creating the Components)

I chose to have this set up here though.

8:10

S… Speaker 1 (51. Creating the Components)

Now let's move on to the shopping list.

8:13

S… Speaker 1 (51. Creating the Components)

Well,

8:14

S… Speaker 1 (51. Creating the Components)

for this, I'll of course run NGGC again to generate a new component.

8:19

S… Speaker 1 (51. Creating the Components)

and I name it shopping list.

8:22

S… Speaker 1 (51. Creating the Components)

I'll also add spec fault here to prevent the creation

8:26

S… Speaker 1 (51. Creating the Components)

of this testing file.

8:28

S… Speaker 1 (51. Creating the Components)

And this will give me a shopping list folder in my main app

8:32

S… Speaker 1 (51. Creating the Components)

folder.

8:33

S… Speaker 1 (51. Creating the Components)

So next to recipes and header.

8:36

S… Speaker 1 (51. Creating the Components)

Inside the shopping list,

8:37

S… Speaker 1 (51. Creating the Components)

there's only one other component I wanted to create and that's the shopping

8:42

S… Speaker 1 (51. Creating the Components)

list added component,

8:44

S… Speaker 1 (51. Creating the Components)

which will allow us to add new ingredients or added existing ones.

8:48

S… Speaker 1 (51. Creating the Components)

That should now go into the shopping list component.

8:51

S… Speaker 1 (51. Creating the Components)

So just like before with recipes,

8:53

S… Speaker 1 (51. Creating the Components)

I'll simply change this to shopping list slash shopping added

8:57

S… Speaker 1 (51. Creating the Components)

and this will now add it inside of this component.

9:01

S… Speaker 1 (51. Creating the Components)

So now we got

9:03

S… Speaker 1 (51. Creating the Components)

all the components we need for now,

9:05

S… Speaker 1 (51. Creating the Components)

or at least I think we need for now.

9:07

S… Speaker 1 (51. Creating the Components)

Of course,

9:08

S… Speaker 1 (51. Creating the Components)

feel free to choose a different setup,

9:10

S… Speaker 1 (51. Creating the Components)

but with all these components added,

9:12

S… Speaker 1 (51. Creating the Components)

and since we used the CLI,

9:13

S… Speaker 1 (51. Creating the Components)

they were also added automatically to AppModule.

9:16

S… Speaker 1 (51. Creating the Components)

If you did create them manually,

9:18

S… Speaker 1 (51. Creating the Components)

make sure to add them here too.

9:19

S… Speaker 1 (51. Creating the Components)

So with all that created and added to AppModule,

9:23

S… Speaker 1 (51. Creating the Components)

we can now use them.

9:24

S… Speaker 1 (51. Creating the Components)

So let's start using them in the next lecture,

9:27

S… Speaker 1 (51. Creating the Components)

and let's also start filling them with some life there.

51. Creating the Components

Resumen

Pregúntele a AI acerca de esta transcripción