17_creating_a_new_component

0:02

S… Speaker 1 (17_creating_a_new_component)

Components are important,

0:03

S… Speaker 1 (17_creating_a_new_component)

right? That is why we start with one,

0:05

S… Speaker 1 (17_creating_a_new_component)

with the app component.

0:06

S… Speaker 1 (17_creating_a_new_component)

It,

0:07

S… Speaker 1 (17_creating_a_new_component)

on the one hand,

0:08

S… Speaker 1 (17_creating_a_new_component)

is a normal Angular component,

0:09

S… Speaker 1 (17_creating_a_new_component)

but on the other hand,

0:10

S… Speaker 1 (17_creating_a_new_component)

it's also kind of special because it serves as our root component.

0:14

S… Speaker 1 (17_creating_a_new_component)

It's in the end listed here in the app module in this bootstrap array,

0:17

S… Speaker 1 (17_creating_a_new_component)

which tells Angular,

0:19

S… Speaker 1 (17_creating_a_new_component)

hey, this is a special component.

0:20

S… Speaker 1 (17_creating_a_new_component)

You should bootstrap the whole application with that component

0:24

S… Speaker 1 (17_creating_a_new_component)

being the root component.

0:26

S… Speaker 1 (17_creating_a_new_component)

So all other components we create will not be added to the

0:30

S… Speaker 1 (17_creating_a_new_component)

index HTML file.

0:31

S… Speaker 1 (17_creating_a_new_component)

Their selectors will not be added here.

0:34

S… Speaker 1 (17_creating_a_new_component)

Their selectors will be added to the app component HTML

0:38

S… Speaker 1 (17_creating_a_new_component)

file because this is now the,

0:40

S… Speaker 1 (17_creating_a_new_component)

well, root component of our app where we add the other parts.

0:43

S… Speaker 1 (17_creating_a_new_component)

Enough talking about adding components.

0:45

S… Speaker 1 (17_creating_a_new_component)

Let's add one.

0:47

S… Speaker 1 (17_creating_a_new_component)

Let's say we want to output some information about

0:52

S… Speaker 1 (17_creating_a_new_component)

a server.

0:53

S… Speaker 1 (17_creating_a_new_component)

We're building a backend for our server management application and

0:57

S… Speaker 1 (17_creating_a_new_component)

we want to output some server information.

0:59

S… Speaker 1 (17_creating_a_new_component)

So I will store this in a new folder,

1:02

S… Speaker 1 (17_creating_a_new_component)

which is a subfolder of the app folder because generally in an Angular

1:07

S… Speaker 1 (17_creating_a_new_component)

CLI project,

1:08

S… Speaker 1 (17_creating_a_new_component)

all your app -related content will go into this app

1:12

S… Speaker 1 (17_creating_a_new_component)

folder.

1:12

S… Speaker 1 (17_creating_a_new_component)

I will name it server because it will hold my server component.

1:17

S… Speaker 1 (17_creating_a_new_component)

And this is a good practice,

1:18

S… Speaker 1 (17_creating_a_new_component)

having the folder name equal your component name.

1:21

S… Speaker 1 (17_creating_a_new_component)

And each component typically should have his own folder,

1:24

S… Speaker 1 (17_creating_a_new_component)

though it's not a hard rule,

1:26

S… Speaker 1 (17_creating_a_new_component)

but generally it makes sense.

1:27

S… Speaker 1 (17_creating_a_new_component)

So here in the server folder,

1:30

S… Speaker 1 (17_creating_a_new_component)

I will add my server component.

1:32

S… Speaker 1 (17_creating_a_new_component)

Now,

1:32

S… Speaker 1 (17_creating_a_new_component)

a good naming convention is to have servers

1:37

S… Speaker 1 (17_creating_a_new_component)

or the name of your component first,

1:38

S… Speaker 1 (17_creating_a_new_component)

then a dot,

1:40

S… Speaker 1 (17_creating_a_new_component)

and then component.

1:42

S… Speaker 1 (17_creating_a_new_component)

We will later learn that there are other building blocks in an Angular application

1:46

S… Speaker 1 (17_creating_a_new_component)

too.

1:46

S… Speaker 1 (17_creating_a_new_component)

So by using file names like this,

1:48

S… Speaker 1 (17_creating_a_new_component)

it's very easy to see what's inside the file.

1:51

S… Speaker 1 (17_creating_a_new_component)

And very important,

1:53

S… Speaker 1 (17_creating_a_new_component)

don't forget to add .ts,

1:55

S… Speaker 1 (17_creating_a_new_component)

so for TypeScript,

1:56

S… Speaker 1 (17_creating_a_new_component)

because this is what we will write this component in.

1:59

S… Speaker 1 (17_creating_a_new_component)

So now we got an empty file for our new component.

2:02

S… Speaker 1 (17_creating_a_new_component)

How do we create a component now?

2:05

S… Speaker 1 (17_creating_a_new_component)

First of all,

2:06

S… Speaker 1 (17_creating_a_new_component)

a component simply is just a class,

2:09

S… Speaker 1 (17_creating_a_new_component)

a TypeScript class,

2:10

S… Speaker 1 (17_creating_a_new_component)

so that Angular is able to instantiate it to create objects

2:14

S… Speaker 1 (17_creating_a_new_component)

based on the blueprint we set up here,

2:16

S… Speaker 1 (17_creating_a_new_component)

you could say.

2:17

S… Speaker 1 (17_creating_a_new_component)

So let's export this class so that we can use it outside of this

2:21

S… Speaker 1 (17_creating_a_new_component)

file too, because as I mentioned before,

2:23

S… Speaker 1 (17_creating_a_new_component)

we're going to use our component in the app component,

2:26

S… Speaker 1 (17_creating_a_new_component)

for example, to add it there.

2:27

S… Speaker 1 (17_creating_a_new_component)

So we will add a class here,

2:30

S… Speaker 1 (17_creating_a_new_component)

and this class should now be named server component.

2:34

S… Speaker 1 (17_creating_a_new_component)

again, the naming convention here,

2:36

S… Speaker 1 (17_creating_a_new_component)

have the name of the component first,

2:38

S… Speaker 1 (17_creating_a_new_component)

server,

2:39

S… Speaker 1 (17_creating_a_new_component)

and then also the description component,

2:41

S… Speaker 1 (17_creating_a_new_component)

because later we will also learn about other parts,

2:44

S… Speaker 1 (17_creating_a_new_component)

which might then be named differently in the Angular app.

2:46

S… Speaker 1 (17_creating_a_new_component)

This is our class.

2:48

S… Speaker 1 (17_creating_a_new_component)

And right now,

2:49

S… Speaker 1 (17_creating_a_new_component)

it's a normal TypeScript class,

2:51

S… Speaker 1 (17_creating_a_new_component)

nothing special about it.

2:53

S… Speaker 1 (17_creating_a_new_component)

We can't use it like this.

2:54

S… Speaker 1 (17_creating_a_new_component)

Angular doesn't have all the information it requires.

2:57

S… Speaker 1 (17_creating_a_new_component)

So we should add something to it which tells Angular that

3:01

S… Speaker 1 (17_creating_a_new_component)

this is not only a normal TypeScript class,

3:04

S… Speaker 1 (17_creating_a_new_component)

but instead something special,

3:06

S… Speaker 1 (17_creating_a_new_component)

a component.

3:07

S… Speaker 1 (17_creating_a_new_component)

We do this by adding a special decorator.

3:10

S… Speaker 1 (17_creating_a_new_component)

Decorators are a TypeScript feature which allow you to enhance

3:14

S… Speaker 1 (17_creating_a_new_component)

your classes,

3:15

S… Speaker 1 (17_creating_a_new_component)

for example.

3:16

S… Speaker 1 (17_creating_a_new_component)

Enhance...

3:17

S… Speaker 1 (17_creating_a_new_component)

elements you use in your code it's not restricted to classes but here we will use a

3:22

S… Speaker 1 (17_creating_a_new_component)

class decorator it's the component decorator and

3:26

S… Speaker 1 (17_creating_a_new_component)

decorators are always attached by adding an add sign in front of them

3:30

S… Speaker 1 (17_creating_a_new_component)

now this component decorator is not

3:34

S… Speaker 1 (17_creating_a_new_component)

something typescript knows from the start so we have to import it we

3:39

S… Speaker 1 (17_creating_a_new_component)

have to add an import

3:41

S… Speaker 1 (17_creating_a_new_component)

And this import now needs to give us access

3:45

S… Speaker 1 (17_creating_a_new_component)

to components.

3:46

S… Speaker 1 (17_creating_a_new_component)

So we need to import component between curly braces because from the file where

3:50

S… Speaker 1 (17_creating_a_new_component)

we're going to import this,

3:51

S… Speaker 1 (17_creating_a_new_component)

we could import our parts too.

3:53

S… Speaker 1 (17_creating_a_new_component)

So we have to specifically pick the component by using this syntax.

3:57

S… Speaker 1 (17_creating_a_new_component)

And then it's from,

3:59

S… Speaker 1 (17_creating_a_new_component)

and now the package where we import component from is

4:03

S… Speaker 1 (17_creating_a_new_component)

at Angular core.

4:06

S… Speaker 1 (17_creating_a_new_component)

Now Angular ships with a couple of packages where it basically groups its functionalities.

4:11

S… Speaker 1 (17_creating_a_new_component)

And the core package,

4:12

S… Speaker 1 (17_creating_a_new_component)

as the name implies,

4:13

S… Speaker 1 (17_creating_a_new_component)

gives us access to some of the core functionalities of Angular.

4:17

S… Speaker 1 (17_creating_a_new_component)

So with that,

4:17

S… Speaker 1 (17_creating_a_new_component)

we import that component.

4:19

S… Speaker 1 (17_creating_a_new_component)

Now this addComponentDecorator is known to TypeScript,

4:22

S… Speaker 1 (17_creating_a_new_component)

so when it parses this file and compiles it to JavaScript,

4:26

S… Speaker 1 (17_creating_a_new_component)

it is able to understand it.

4:28

S… Speaker 1 (17_creating_a_new_component)

Now we need to pass a JavaScript object to this componentDecorator

4:32

S… Speaker 1 (17_creating_a_new_component)

to configure it,

4:33

S… Speaker 1 (17_creating_a_new_component)

because without any configuration,

4:34

S… Speaker 1 (17_creating_a_new_component)

it's still not that valuable to Angular.

4:37

S… Speaker 1 (17_creating_a_new_component)

But here we can set up some important information,

4:40

S… Speaker 1 (17_creating_a_new_component)

which will be stored as metadata for this class in the background then,

4:45

S… Speaker 1 (17_creating_a_new_component)

which will...

4:46

S… Speaker 1 (17_creating_a_new_component)

tell Angular what to do with this class.

4:48

S… Speaker 1 (17_creating_a_new_component)

And one important information piece is the selector.

4:52

S… Speaker 1 (17_creating_a_new_component)

So basically the HTML tag by which you're able

4:57

S… Speaker 1 (17_creating_a_new_component)

to use this component later in your other components templates.

5:01

S… Speaker 1 (17_creating_a_new_component)

We will see this in action soon.

5:02

S… Speaker 1 (17_creating_a_new_component)

The selector should be a string and here

5:06

S… Speaker 1 (17_creating_a_new_component)

you may set up any name you want,

5:09

S… Speaker 1 (17_creating_a_new_component)

but you should make sure that it is a unique selector,

5:11

S… Speaker 1 (17_creating_a_new_component)

that you don't accidentally overwrite a default HTML element or

5:15

S… Speaker 1 (17_creating_a_new_component)

something like this.

5:16

S… Speaker 1 (17_creating_a_new_component)

So typically you prefix it with app dash and

5:20

S… Speaker 1 (17_creating_a_new_component)

then a fitting name like server because it's a server component.

5:24

S… Speaker 1 (17_creating_a_new_component)

This is my own selector by which I can now later use

5:28

S… Speaker 1 (17_creating_a_new_component)

this component in my other components HTML files.

5:31

S… Speaker 1 (17_creating_a_new_component)

So with that set up,

5:34

S… Speaker 1 (17_creating_a_new_component)

The other important piece we need to have is the template.

5:37

S… Speaker 1 (17_creating_a_new_component)

And here,

5:38

S… Speaker 1 (17_creating_a_new_component)

let's reference another external file.

5:41

S… Speaker 1 (17_creating_a_new_component)

I'll come back to another alternative to this soon.

5:44

S… Speaker 1 (17_creating_a_new_component)

And this external file,

5:46

S… Speaker 1 (17_creating_a_new_component)

of course,

5:47

S… Speaker 1 (17_creating_a_new_component)

needs to be created.

5:48

S… Speaker 1 (17_creating_a_new_component)

So in the same folder,

5:50

S… Speaker 1 (17_creating_a_new_component)

I will create a server .component and now .html

5:54

S… Speaker 1 (17_creating_a_new_component)

file.

5:54

S… Speaker 1 (17_creating_a_new_component)

This will hold the template,

5:56

S… Speaker 1 (17_creating_a_new_component)

the HTML code of my component here.

5:58

S… Speaker 1 (17_creating_a_new_component)

So here,

6:00

S… Speaker 1 (17_creating_a_new_component)

I can now basically

6:02

S… Speaker 1 (17_creating_a_new_component)

any content I want like for example the server component

6:06

S… Speaker 1 (17_creating_a_new_component)

to start simple

6:08

S… Speaker 1 (17_creating_a_new_component)

And back to the TypeScript file,

6:10

S… Speaker 1 (17_creating_a_new_component)

I can now point to this HTML file.

6:14

S… Speaker 1 (17_creating_a_new_component)

We need a relative path for this.

6:16

S… Speaker 1 (17_creating_a_new_component)

In the end,

6:17

S… Speaker 1 (17_creating_a_new_component)

this will all get bundled by Webpack,

6:19

S… Speaker 1 (17_creating_a_new_component)

so we need to tell it where to find the HTML file.

6:22

S… Speaker 1 (17_creating_a_new_component)

Well,

6:23

S… Speaker 1 (17_creating_a_new_component)

and relative to the TypeScript file,

6:24

S… Speaker 1 (17_creating_a_new_component)

the path simply is .slash server .component

6:29

S… Speaker 1 (17_creating_a_new_component)

.html,

6:30

S… Speaker 1 (17_creating_a_new_component)

like this.

6:31

S… Speaker 1 (17_creating_a_new_component)

This is pointing to this file.

6:33

S… Speaker 1 (17_creating_a_new_component)

With this,

6:34

S… Speaker 1 (17_creating_a_new_component)

we created our first component.

6:37

S… Speaker 1 (17_creating_a_new_component)

Now to use it,

6:38

S… Speaker 1 (17_creating_a_new_component)

we need to dive into app module and understand what this does

6:43

S… Speaker 1 (17_creating_a_new_component)

because we need to change something here to use our own component.

6:46

S… Speaker 1 (17_creating_a_new_component)

Let's do this in the next lecture.

17_creating_a_new_component

Samenvatting

Vraag AI over dit Transcript