All language subtitles for 6. Components in Angular3

We've now got one card visible on the screen so we still have to show those other two cards.

Bonus video we're going to take a look at a couple of different diagrams to explain how we might show

those other two cards in a angular style fashion.

OK.

So a couple of diagrams though in this first diagram right here.

I want to explain some very simplistic way and not a very good angular approach that we might just try

to show those other two cards.

So a very simplistic way would be to open up our app component HDMI file inside there we can take all

the each HTML that we just wrote for The Tree card and duplicate it twice down.

And then in each of those duplicated segments of each team out we could start to change some of the

text and make sure that one reflects some properties of say the mountains card and the other is for

biking.

Some of the words duplicate HDL and just change some stuff inside there.

This is really not a very good approach because we're talking about taking some H2 structure and just

willy nilly duplicating it throughout our application.

What would happen if we decided to add in more cards.

Well if we decided to add in more cards we would just be duplicating more HCM.

If we then decided to change the structure of our card like change the HDL we would have to go back

to each and every one of these snippets and change each one by hand.

Definitely not very good but rather than duplicating all that HCM l we're going to create something

called a component to make this little bit of H2 and all that we're trying to create more reusable in

nature is the thing I want you to take away here is that any time that we are duplicating each team

l It is frequently a sign that we might want to try to create a component.

There are other ways in angular to reduce each small duplication but definitely thinking about creating

a component is a good place to get started.

Now we've kind of been having the term component float around quite a bit in this course so far but

in this video I want to really explain to you what a component is.

We're going to go over a couple notes here.

I know there's a lot of texture on the screen.

We're going to go through this rather quickly because we're going to see attributes of each of these

different notes very quickly inside this application that we're working on OK.

A couple of notes.

First off all angular applications we create are going to be assembled out of different components that

we make in other words the vast majority of your time working on an angular application is going to

be spent creating different components and then assembling them together to actually make a useful application

each component that you and I create is going to be designed to implement or show one single thing or

really a widget for the user on the screen.

Let me show you an example right away though here on the left hand side we have what looks like a little

dropdown kind of button we might create a component to encapsulate all the behavior of this little widget

right here.

We might also create a component to say show a series of navigation tabs to a user.

We might also create more complex components like maybe something called a repository component.

It shows details about some get repository or something like that to the user as well.

So in general we try to create components to show single widgets to a user.

We try to make these components as reusable as possible and then to build an actual angular application.

We're going to spend all of our time taking these components and assembling them together in some fashion.

Next note though whenever we create a component it's going to wrap up all the each CML and all the code

all the CSX required to make that one little widget work correctly though very soon you and I are going

to as you'd probably guess create a new component meant to display an individual card to the user.

When we create that component we're going to write out all this assess all the each team all all the

code required to make this thing work correctly.

Inside of the irrelevant component files.

Next up a component can be reused multiple times in the same application.

So in general you and I tried to make components that are as reusable as possible and then we tried

to configure those components to work in slightly different ways.

For example for our application we're going to create one reusable component called a card component

that's going to really just represent all this stuff right here.

We're then going to reuse that component three times one to show the tree stuff one from mountain and

one for biking.

The one component that gets reused Next up components can be nested or shown inside of each other.

Let's go back to that example.

We looked at just over here at these three different components.

Let's imagine that we took these three different components and we wanted to form an actual application

out of them.

Maybe something that looks like this right here though on the left hand side maybe we'd have the tabs

for navigation and then this repositories thing and then for some reason a dropdown button on the top

right inside the build something like this we would take these three different components we would create

one copy of each of them and then to show them to the user on the screen.

We would nest all of them in something called the app components and so we would end up with a structure

that looks like this right here.

This is what we call a component hierarchy diagram.

This means that at the very top we have an app component that is responsible for showing our entire

application to the user and then inside that component we have nested three others.

We have nested the dropdown tabs and repository and nesting these different components together is what

gets them visible on the screen.

Now the app component right here at the very top as you might guess is actually that app stuff that

we've been working on inside of our projects so far this app thing.

Well I know the name really implies it the app thing is a component in itself.

So we've already been working with a component quite a bit as we start to add in other components to

our application.

We are going to nest them inside of this app component that we already have to get our new components

visible on the screen at just one or two more notes here.

The next up like we just said every app has a component called app component and it's always going to

be the most parents component.

In other words that thing gets shown by default inside of our application and then in order to show

other content to the user we're going to place other components inside of the app component.

We're going to do that right away for this very first application.

So you'll see a good example this almost immediately.

All right.

And final note here.

Every component we create has its own component class which we've already worked with quite a bit.

It's own component templates which we've worked with it's own components the file and a SPECT file as

well.

We haven't really discussed testing or spec files at all.

That's something that we definitely are going to get into quite a bit throughout this course Okay that's

it.

Some high level notes on components let's take a pause right here.

When we come back the next video we're gonna create our own very first component meant to represent

these different cards that we are showing to the user and use it to show the tree on the screen.

Let's take care of that in just a moment.