This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We already have a main component. In this video we'll create child components to display our photos.
Components are the course to
developing an angular application.
0:00
In the previous video, we learned how
to add functionality to parts of our
0:04
component by binding
a function to an event, but
0:08
we need to do more with our application
if we want to show off photos.
0:12
We'll be adding two new components,
one for the list of posts, and one for
0:17
the post itself, let's dive in.
0:21
To start, I'm going to create a new
directory inside the app directory.
0:24
It will contain all of my
photo entry components.
0:29
So I'm going to call it Entries.
0:34
Angular style guide suggests keeping
like components in a parent folder.
0:39
For this application it means that all of
our components that's specific to entries
0:43
will be located in the entries directory.
0:49
You can find the link to the style
guide in the teacher's notes.
0:51
I'll now add the entry Directory and
the entry list directory.
0:54
In the entry list directory I'll
create three component files.
1:06
Entry list.components .cs.
1:15
Entry-list.component.html and
1:29
entry-list.component.css.
1:38
Be sure to create all of these files
1:46
even if you don't intend on using
the stylesheet for this component.
1:50
You'll be doing yourself a favor when
the time comes when you do want to use it.
1:54
In the entry list component.ts file,
let's create the base component.
1:59
First, you need to import the component
decorator from the angular core.
2:04
Then we'll add the component class.
2:22
Make sure it's exported so
we can import it later,
2:31
then add the component decorator.
2:35
When giving your component a selector,
be sure to use all lowercase characters.
2:47
And the words are separated with a hyphen.
2:58
This is known as kebab case.
3:05
It's consistent with html specification.
3:07
Angular style guide has more
information on naming a selector.
3:10
This selector is what we'll be using
in our app component's template.
3:13
Let's add the templateUrl.
3:18
Then the styleUrls.
3:29
Set to an array containing
the new recreated stylesheet.
3:34
Next we need to tell Angular
about our new component.
3:44
We do this by opening up the app.module.ts
and imported the component.
3:50
Then, adding it to the module's
declarations property
4:15
Throughout this course,
we'll be adding more components.
4:28
I don't really want to continue adding
lines to the app.module.ts file for
4:31
every new component we create.
4:36
Instead I'm going to create what
in @angular is called a barrel.
4:38
A barrel is a single file that re-exports
all components and services for
4:42
a feature, it doesn't serve
any other purpose than that.
4:47
So in the entry's directory,
I'll create a new file called index.ts.
4:50
In this file I want a line to export
everything from the entry list component.
4:59
Then at the app modules ts file,
I'll change the previous
5:17
import statement to be
the entry's directory.
5:23
Now whenever I add a new component
to the entry's directory,
5:37
I can access it on this one import.
5:42
You can find out more information
about barrels in the teacher's notes.
5:45
Now, that our entry list component is
being referenced in the NG module,
5:49
we can start using it
throughout our application.
5:53
Let's go back to our app.component.html
file and mess things up.
5:56
We can start by replacing the H2 that we
worked so hard on before with a new tag.
6:01
We want to add our entry list here.
6:07
I'll add the app-entry-list
custom element to the page.
6:10
This is where Angular's compiler is going
to check that it has a reference to our
6:14
component.
6:18
Let's look in the browser
to see what's going on.
6:19
An empty pitch.
6:22
Just what I'd expect
since we haven't added
6:23
any content to our entry list template.
6:26
Let's quickly demonstrate
what happens when you try and
6:28
reference a selector
Angular doesn't know about.
6:30
I'll change up app-entry-list with foo.
6:33
And we'll see what happens.
6:37
The app failed to load and
the console is red.
6:41
There's one line that says
foo is not a known element.
6:45
It tells me how I can go
about fixing the issue.
6:49
This is super helpful information
when something really goes wrong.
6:51
But in our case, everything is fine.
6:55
I'll change the foo tag
back to app-entry-list.
6:57
I'll double check, and
the browser's happy again, cool, great.
7:02
Now, if we take what we learned
from the entry-list component,
7:06
we'll need to do the same for
the entry component.
7:09
So in the entry directory,
7:12
let's create the three files,
7:16
entry.component.ts.
7:21
Then entry.component.html.
7:26
Then entry.component.css.
7:32
To create this component, I'm going to
just copy the contents of the entry list.
7:40
And paste it into
the EntryComponent.ts file.
7:49
Then I need to change
the name of the component to
7:54
EntryComponent And adjust the selector
7:57
the template URL, and these styles.
8:06
Save the file.
8:11
Then to re-export
the component in the barrel,
8:15
I'll re-open the index.ts
file in the entry's folder.
8:18
And then add the export line.
8:22
Finally I'll reference the new
component in the app.module.ts file.
8:27
Because we're using a barrel, and
I did not need to add a new line.
8:40
All I needed to do was
include entry component
8:43
in the import list from
the entry's directory.
8:46
Then Add a reference to
the declarations property so
8:52
Angularjs can use the new component.
8:55
Something to note here.
8:57
I placed entry component above entry list
component in the declarations array.
8:59
Angulars compiler reads through each
of the components templates looking for
9:05
the element.
9:09
It doesn't recognize.
9:10
Have the compiler reach
the entrylist component first, and
9:11
entry component hadn't been
processed by the compiler,
9:16
we'd see an error in the console and
the app wouldn't work.
9:19
Always put your child components first.
9:22
Now let's make sure that we can see
both components in the browser.
9:25
In the entrylist.component.html
I'll add a friendly message.
9:29
Hello from entry-list.component.html.
9:33
I'll also add the app-entry element, so
9:42
I can verify that the entry
component is being loaded.
9:46
Now if I jump on over to
the entry.component.HTML.
9:53
Lets add a friendly message in there,
hello from entry.component.HTML.
9:58
Save the file and
we get to the browser and I see.
10:06
Both messages are there.
10:13
It's working.
10:15
Great.
10:16
We're really moving along now.
10:17
Keep up the great work.
10:19
In the next video we'll build up
the basic HTML and CSS for entry.
10:21
I hope you're as excited as I am.
10:26
You need to sign up for Treehouse in order to download course files.
Sign up