Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,810 --> 00:00:02,440
We've now gotten some notes on components.
2
00:00:02,460 --> 00:00:07,320
So let's now create a new one inside of our project a component that we are going to create is going
3
00:00:07,320 --> 00:00:10,680
to try to show one single card to the user.
4
00:00:10,680 --> 00:00:13,040
Remember components are reusable in nature.
5
00:00:13,090 --> 00:00:18,400
We're going to create this one component and then show it three times to the user on the screen now
6
00:00:18,460 --> 00:00:20,660
as we just saw inside this diagram over here.
7
00:00:20,670 --> 00:00:24,020
Every component we create has its own set of component files.
8
00:00:24,040 --> 00:00:28,590
There are four different files that create a component reading these four different files from hand
9
00:00:28,860 --> 00:00:34,110
would be really annoying and a real pain in the neck rather than creating those files manually.
10
00:00:34,110 --> 00:00:38,850
We're going to instead use a feature of the angular CLIA at this point.
11
00:00:38,850 --> 00:00:42,890
We have only used the angular CLIA to start projects and to create them.
12
00:00:42,910 --> 00:00:48,660
We can also use the angular supply to manage existing projects but we're going to run a command and
13
00:00:48,660 --> 00:00:54,240
G generate component and then the name other component we want to make that is going to have the angular
14
00:00:54,280 --> 00:00:59,910
CLIA automatically generates the four different files for us and wired them up inside of our project
15
00:01:01,580 --> 00:01:03,230
let's flip on over to our terminal.
16
00:01:03,230 --> 00:01:06,850
We're going to run this command to generate our new components.
17
00:01:06,900 --> 00:01:07,140
All right.
18
00:01:07,170 --> 00:01:11,730
So I'll go back over to my terminal and once again inside of a second terminal window that is inside
19
00:01:11,730 --> 00:01:15,030
of my card's project directory inside of here.
20
00:01:15,030 --> 00:01:20,760
I will generate my new component with energy generate component and then the name of the component I
21
00:01:20,760 --> 00:01:21,390
want to make.
22
00:01:21,390 --> 00:01:27,920
So in this case I'm going to make a component called Card run that command and I'll see right away that
23
00:01:27,920 --> 00:01:33,740
my four different component files were created automatically CSX file the templates the testing file
24
00:01:34,160 --> 00:01:36,270
and the component class file as well.
25
00:01:36,410 --> 00:01:40,430
You'll also notice an update was made to an existing file inside of our project.
26
00:01:40,430 --> 00:01:45,020
We'll worry about exactly what's going on inside of there a little bit later on okay.
27
00:01:45,080 --> 00:01:48,870
So now right away let's go back over to our browser and see what happened.
28
00:01:48,880 --> 00:01:52,560
So when I go back over the notice that nothing changed whatsoever.
29
00:01:52,730 --> 00:01:57,520
They're just creating a component doesn't change our application in order to actually have that component
30
00:01:57,520 --> 00:01:58,880
be displayed on the screen.
31
00:01:58,960 --> 00:02:01,840
We have to nest it inside of another member.
32
00:02:01,930 --> 00:02:04,850
That was one of the core rules of components that we just discussed.
33
00:02:05,080 --> 00:02:10,560
We have to nest them inside of each other to get them visible on the screen.
34
00:02:10,680 --> 00:02:15,790
Let's go back over to our editor and figure out exactly how to do that back inside of my editor.
35
00:02:15,830 --> 00:02:22,250
I'm going to take a look at my app directory inside there there is a new folder called Card on of card
36
00:02:22,280 --> 00:02:24,830
is the four different files that were just generated.
37
00:02:24,830 --> 00:02:29,870
If we open up the component class file we'll notice that there is already some implementation inside
38
00:02:29,870 --> 00:02:30,680
here.
39
00:02:30,680 --> 00:02:34,820
So when we generate a new components we're not only generating the files we're also getting some code
40
00:02:34,860 --> 00:02:37,220
set up inside them automatically.
41
00:02:37,220 --> 00:02:43,360
So using that generate command really saves us a lot of typing we can also open up the component template
42
00:02:43,360 --> 00:02:43,740
file.
43
00:02:43,750 --> 00:02:49,570
So card component H2 e-mail and we'll notice that by default every component we create as a single paragraph
44
00:02:49,570 --> 00:02:54,260
element that says something like card or whatever the name of our component is works.
45
00:02:54,280 --> 00:02:55,960
Again this is just some default stuff.
46
00:02:55,960 --> 00:03:01,740
So you can verify that the component is working as expected so now that we have this new component let's
47
00:03:01,740 --> 00:03:04,940
figure out how we actually nested inside of another.
48
00:03:04,990 --> 00:03:09,630
The first thing to do is identify what components we want to show the card inside.
49
00:03:10,080 --> 00:03:15,870
Right now we only have one other component the app component that we're going to take the card and nested
50
00:03:15,870 --> 00:03:19,560
inside of the app in this scenario.
51
00:03:19,560 --> 00:03:25,740
We would refer to the app as the parent component and the card as the child because the app is showing
52
00:03:25,830 --> 00:03:28,820
the child Jeanette's the card inside the app.
53
00:03:28,830 --> 00:03:34,300
We're going to open up the apps component template file and then at the very top we're going to write
54
00:03:34,300 --> 00:03:36,370
out a little snippet of each team.
55
00:03:36,820 --> 00:03:43,260
We're going to write out app dash card and then lose that element off.
56
00:03:43,380 --> 00:03:48,410
That is how we nest one element inside or see one component inside of another.
57
00:03:48,420 --> 00:03:51,240
You'll notice that right away I'm getting an error on the sign right here.
58
00:03:51,240 --> 00:03:53,630
That is just because my editor is really confused.
59
00:03:53,820 --> 00:03:59,640
If I reload my window here really quickly that error will go away entirely.
60
00:03:59,660 --> 00:04:01,610
Yep it went away.
61
00:04:01,720 --> 00:04:05,220
So again that is how we nest one component inside of another.
62
00:04:05,220 --> 00:04:09,160
Now you might be really curious how did we know to write out app dash card.
63
00:04:09,160 --> 00:04:12,610
Why is it not just like card or something like that.
64
00:04:12,610 --> 00:04:16,670
Well if you open up your component template file once again inside the card directory.
65
00:04:16,670 --> 00:04:17,870
So that's card component.
66
00:04:17,960 --> 00:04:19,130
Yes.
67
00:04:19,150 --> 00:04:21,990
You'll notice that inside of this really weird syntax at the very top.
68
00:04:22,090 --> 00:04:28,210
There's something called a selector and selectors currently app dash card so the selector determines
69
00:04:28,240 --> 00:04:31,660
exactly how we display one component side of another.
70
00:04:31,660 --> 00:04:35,830
We're going to come back to the selector in the next video and have some more information about it.
71
00:04:35,980 --> 00:04:40,140
Right now let's just save the app component a small file.
72
00:04:40,190 --> 00:04:45,390
I'm gonna go back over to my browser and you'll see at the very top left it says card works.
73
00:04:45,390 --> 00:04:51,900
That means that I am successfully displaying my card component inside the app now as we've discussed.
74
00:04:52,040 --> 00:04:55,610
We can reuse a component as many times as we want.
75
00:04:55,670 --> 00:05:01,040
So if I start to make copies of that element right there I'm going to be creating seven different copies
76
00:05:01,040 --> 00:05:02,190
of the card component.
77
00:05:03,080 --> 00:05:08,930
I can save this now and I'll see seven copies of card works appear on the screen OK.
78
00:05:09,000 --> 00:05:12,650
So that is how we create a component and get it visible on the screen.
79
00:05:12,650 --> 00:05:13,710
Let's take a pause right here.
80
00:05:13,730 --> 00:05:18,200
As I mentioned we're going to have a deeper discussion on what the selector thing is right here and
81
00:05:18,200 --> 00:05:22,040
how these different components essentially get wired together and show up on the screen.
8730
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.