All language subtitles for 7. Creating Components

We've now gotten some notes on components.

So let's now create a new one inside of our project a component that we are going to create is going

to try to show one single card to the user.

Remember components are reusable in nature.

We're going to create this one component and then show it three times to the user on the screen now

as we just saw inside this diagram over here.

Every component we create has its own set of component files.

There are four different files that create a component reading these four different files from hand

would be really annoying and a real pain in the neck rather than creating those files manually.

We're going to instead use a feature of the angular CLIA at this point.

We have only used the angular CLIA to start projects and to create them.

We can also use the angular supply to manage existing projects but we're going to run a command and

G generate component and then the name other component we want to make that is going to have the angular

CLIA automatically generates the four different files for us and wired them up inside of our project

let's flip on over to our terminal.

We're going to run this command to generate our new components.

All right.

So I'll go back over to my terminal and once again inside of a second terminal window that is inside

of my card's project directory inside of here.

I will generate my new component with energy generate component and then the name of the component I

want to make.

So in this case I'm going to make a component called Card run that command and I'll see right away that

my four different component files were created automatically CSX file the templates the testing file

and the component class file as well.

You'll also notice an update was made to an existing file inside of our project.

We'll worry about exactly what's going on inside of there a little bit later on okay.

So now right away let's go back over to our browser and see what happened.

So when I go back over the notice that nothing changed whatsoever.

They're just creating a component doesn't change our application in order to actually have that component

be displayed on the screen.

We have to nest it inside of another member.

That was one of the core rules of components that we just discussed.

We have to nest them inside of each other to get them visible on the screen.

Let's go back over to our editor and figure out exactly how to do that back inside of my editor.

I'm going to take a look at my app directory inside there there is a new folder called Card on of card

is the four different files that were just generated.

If we open up the component class file we'll notice that there is already some implementation inside

here.

So when we generate a new components we're not only generating the files we're also getting some code

set up inside them automatically.

So using that generate command really saves us a lot of typing we can also open up the component template

file.

So card component H2 e-mail and we'll notice that by default every component we create as a single paragraph

element that says something like card or whatever the name of our component is works.

Again this is just some default stuff.

So you can verify that the component is working as expected so now that we have this new component let's

figure out how we actually nested inside of another.

The first thing to do is identify what components we want to show the card inside.

Right now we only have one other component the app component that we're going to take the card and nested

inside of the app in this scenario.

We would refer to the app as the parent component and the card as the child because the app is showing

the child Jeanette's the card inside the app.

We're going to open up the apps component template file and then at the very top we're going to write

out a little snippet of each team.

We're going to write out app dash card and then lose that element off.

That is how we nest one element inside or see one component inside of another.

You'll notice that right away I'm getting an error on the sign right here.

That is just because my editor is really confused.

If I reload my window here really quickly that error will go away entirely.

Yep it went away.

So again that is how we nest one component inside of another.

Now you might be really curious how did we know to write out app dash card.

Why is it not just like card or something like that.

Well if you open up your component template file once again inside the card directory.

So that's card component.

Yes.

You'll notice that inside of this really weird syntax at the very top.

There's something called a selector and selectors currently app dash card so the selector determines

exactly how we display one component side of another.

We're going to come back to the selector in the next video and have some more information about it.

Right now let's just save the app component a small file.

I'm gonna go back over to my browser and you'll see at the very top left it says card works.

That means that I am successfully displaying my card component inside the app now as we've discussed.

We can reuse a component as many times as we want.

So if I start to make copies of that element right there I'm going to be creating seven different copies

of the card component.

I can save this now and I'll see seven copies of card works appear on the screen OK.

So that is how we create a component and get it visible on the screen.

Let's take a pause right here.

As I mentioned we're going to have a deeper discussion on what the selector thing is right here and

how these different components essentially get wired together and show up on the screen.