Components are the course to developing an angular application.

In the previous video, we learned how to add functionality to parts of our

component by binding a function to an event, but

we need to do more with our application if we want to show off photos.

We'll be adding two new components, one for the list of posts, and one for

the post itself, let's dive in.

To start, I'm going to create a new directory inside the app directory.

It will contain all of my photo entry components.

So I'm going to call it Entries.

Angular style guide suggests keeping like components in a parent folder.

For this application it means that all of our components that's specific to entries

will be located in the entries directory.

You can find the link to the style guide in the teacher's notes.

I'll now add the entry Directory and the entry list directory.

In the entry list directory I'll create three component files.

Entry list.components .cs.

Entry-list.component.html and

entry-list.component.css.

Be sure to create all of these files

even if you don't intend on using the stylesheet for this component.

You'll be doing yourself a favor when the time comes when you do want to use it.

In the entry list component.ts file, let's create the base component.

First, you need to import the component decorator from the angular core.

Then we'll add the component class.

Make sure it's exported so we can import it later,

then add the component decorator.

When giving your component a selector, be sure to use all lowercase characters.

And the words are separated with a hyphen.

This is known as kebab case.

It's consistent with html specification.

Angular style guide has more information on naming a selector.

This selector is what we'll be using in our app component's template.

Let's add the templateUrl.

Then the styleUrls.

Set to an array containing the new recreated stylesheet.

Next we need to tell Angular about our new component.

We do this by opening up the app.module.ts and imported the component.

Then, adding it to the module's declarations property

Throughout this course, we'll be adding more components.

I don't really want to continue adding lines to the app.module.ts file for

every new component we create.

Instead I'm going to create what in @angular is called a barrel.

A barrel is a single file that re-exports all components and services for

a feature, it doesn't serve any other purpose than that.

So in the entry's directory, I'll create a new file called index.ts.

In this file I want a line to export everything from the entry list component.

Then at the app modules ts file, I'll change the previous

import statement to be the entry's directory.

Now whenever I add a new component to the entry's directory,

I can access it on this one import.

You can find out more information about barrels in the teacher's notes.

Now, that our entry list component is being referenced in the NG module,

we can start using it throughout our application.

Let's go back to our app.component.html file and mess things up.

We can start by replacing the H2 that we worked so hard on before with a new tag.

We want to add our entry list here.

I'll add the app-entry-list custom element to the page.

This is where Angular's compiler is going to check that it has a reference to our

component.

Let's look in the browser to see what's going on.

An empty pitch.

Just what I'd expect since we haven't added

any content to our entry list template.

Let's quickly demonstrate what happens when you try and

reference a selector Angular doesn't know about.

I'll change up app-entry-list with foo.

And we'll see what happens.

The app failed to load and the console is red.

There's one line that says foo is not a known element.

It tells me how I can go about fixing the issue.

This is super helpful information when something really goes wrong.

But in our case, everything is fine.

I'll change the foo tag back to app-entry-list.

I'll double check, and the browser's happy again, cool, great.

Now, if we take what we learned from the entry-list component,

we'll need to do the same for the entry component.

So in the entry directory,

let's create the three files,

entry.component.ts.

Then entry.component.html.

Then entry.component.css.

To create this component, I'm going to just copy the contents of the entry list.

And paste it into the EntryComponent.ts file.

Then I need to change the name of the component to

EntryComponent And adjust the selector

the template URL, and these styles.

Save the file.

Then to re-export the component in the barrel,

I'll re-open the index.ts file in the entry's folder.

And then add the export line.

Finally I'll reference the new component in the app.module.ts file.

Because we're using a barrel, and I did not need to add a new line.

All I needed to do was include entry component

in the import list from the entry's directory.

Then Add a reference to the declarations property so

Angularjs can use the new component.

Something to note here.

I placed entry component above entry list component in the declarations array.

Angulars compiler reads through each of the components templates looking for

the element.

It doesn't recognize.

Have the compiler reach the entrylist component first, and

entry component hadn't been processed by the compiler,

we'd see an error in the console and the app wouldn't work.

Always put your child components first.

Now let's make sure that we can see both components in the browser.

In the entrylist.component.html I'll add a friendly message.

Hello from entry-list.component.html.

I'll also add the app-entry element, so

I can verify that the entry component is being loaded.

Now if I jump on over to the entry.component.HTML.

Lets add a friendly message in there, hello from entry.component.HTML.

Save the file and we get to the browser and I see.

Both messages are there.

It's working.

Great.

We're really moving along now.

Keep up the great work.

In the next video we'll build up the basic HTML and CSS for entry.

I hope you're as excited as I am.