Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,200 --> 00:00:01,550
All right.
2
00:00:01,560 --> 00:00:04,630
In this video I'm inside of my app component a simple file.
3
00:00:04,710 --> 00:00:09,570
We're going to make sure that we also take the image URL the user username and content of the other
4
00:00:09,570 --> 00:00:13,200
two posts and pass those down to the other two card components.
5
00:00:13,320 --> 00:00:14,750
But just a little bit of typing.
6
00:00:14,760 --> 00:00:17,690
Let's get to it on my second app card.
7
00:00:17,690 --> 00:00:23,680
I'm going to put some new lines inside of here to format it in the same way we had the first app card.
8
00:00:23,850 --> 00:00:29,330
Then inside the second element to say that the image you URL for this copy of the card component is
9
00:00:29,330 --> 00:00:34,410
going to come from posts at one dot image your URL.
10
00:00:34,480 --> 00:00:35,680
We'll also do our user name
11
00:00:38,550 --> 00:00:41,580
which will be posted at one dot user name.
12
00:00:41,640 --> 00:00:47,870
And then finally our content will come from us at 1 not content.
13
00:00:47,900 --> 00:00:50,590
Now we can repeat that same process on the last card as well.
14
00:00:50,590 --> 00:00:54,730
But we will be referencing the third post inside of our poster array.
15
00:00:55,200 --> 00:01:00,810
But once again I'm going to do a little bit of indentation here and then this time I'm just going to
16
00:01:00,810 --> 00:01:07,010
copy image you URL username and content from the previous element and I'll throw that down like so and
17
00:01:07,020 --> 00:01:13,290
then I will make sure that I update the index in here to the third element which is that index to do
18
00:01:13,290 --> 00:01:17,870
pose it to you and to it.
19
00:01:17,890 --> 00:01:18,830
Let's save this.
20
00:01:18,850 --> 00:01:23,920
I'm gonna make sure that I've got all zeros all ones and all twos all.
21
00:01:23,920 --> 00:01:28,400
Then go back over to my browser and we'll take a look at our application okay.
22
00:01:28,450 --> 00:01:30,030
So back over here I do see it.
23
00:01:30,030 --> 00:01:35,160
Neat treat snowy mountain and mountain biking but nothing else has been actually changed.
24
00:01:35,160 --> 00:01:38,330
We still have everything else as the same exact content.
25
00:01:38,330 --> 00:01:39,670
But why is that.
26
00:01:39,910 --> 00:01:41,800
What we have passed down this information.
27
00:01:41,800 --> 00:01:47,140
But remember we didn't actually open up that child component and make sure that we actually consumed
28
00:01:47,230 --> 00:01:52,150
all that additional information inside the child components template file but just passing down this
29
00:01:52,150 --> 00:01:53,510
information isn't enough.
30
00:01:53,620 --> 00:01:57,790
We need to make sure that we open up that child components template file and actually reference these
31
00:01:57,790 --> 00:02:03,660
different properties that are being passed down if we open up our card component template which is the
32
00:02:03,660 --> 00:02:09,060
card component each nail file inside of here we still have the hardcoded image source we still have
33
00:02:09,060 --> 00:02:14,400
the hardcoded user name and the hardcoded content as well so we need to go through to all three of those
34
00:02:14,670 --> 00:02:19,350
and make sure we update them to refer to the different properties on our components as opposed to these
35
00:02:19,370 --> 00:02:21,180
hard coded text.
36
00:02:21,180 --> 00:02:22,310
Let's do that right now.
37
00:02:23,670 --> 00:02:26,430
First off I'll find the user name right here.
38
00:02:26,430 --> 00:02:28,190
I'm going to remove the nature.
39
00:02:28,290 --> 00:02:33,050
I'm going to leave behind the at symbol because technically our user names didn't actually.
40
00:02:33,060 --> 00:02:37,980
Let's see if I find my app component to yes file our user names don't actually have the app symbol inside
41
00:02:37,980 --> 00:02:44,370
them but I do want to show that inside of my template I'm gonna put down at and then the curly braces
42
00:02:44,910 --> 00:02:52,070
and user name that will end up printing out at nature out mountain biker and whatever else and for content
43
00:02:52,100 --> 00:02:58,300
we can delete the hardcoded content and replace it with really curly content.
44
00:02:58,490 --> 00:03:01,670
And then finally we need to make sure we update the image source as well.
45
00:03:01,670 --> 00:03:06,800
Now in this case we are trying to set the property of an element as opposed to just like printing out
46
00:03:06,800 --> 00:03:08,530
some raw information.
47
00:03:08,580 --> 00:03:13,790
So in this case we're going to use our property bindings and tax as opposed to the interpolation syntax
48
00:03:14,060 --> 00:03:20,180
because we want to set a property on an element though on that image we'll put inside of these square
49
00:03:20,180 --> 00:03:20,990
brackets.
50
00:03:20,990 --> 00:03:28,960
Source and then inside of our double quotes you'll refer to the image you are l remember as soon as
51
00:03:28,960 --> 00:03:34,690
we add in the square brackets everything inside of those double quotes is now evaluated as code.
52
00:03:34,690 --> 00:03:41,290
So when we write out image all right there that is a reference back to our card component class specifically
53
00:03:41,320 --> 00:03:45,280
the image you are L property on their OK.
54
00:03:45,320 --> 00:03:46,890
Let's save all these files now.
55
00:03:47,120 --> 00:03:50,290
We'll go back over to our browser check out our application.
56
00:03:50,290 --> 00:03:56,450
Now we've got the tree image titled neat tree nature I saw this tree today looks good.
57
00:03:56,450 --> 00:04:01,100
The second has a different image different image and he's also have different handles or different user
58
00:04:01,100 --> 00:04:03,030
names in different content as well.
59
00:04:03,840 --> 00:04:04,400
Awesome.
60
00:04:04,410 --> 00:04:09,180
So it looks like we are now correctly showing three different cards and each of them has their own set
61
00:04:09,180 --> 00:04:10,610
of content inside.
62
00:04:10,770 --> 00:04:15,990
We have successfully reused one single component and every time we used it we passed in a different
63
00:04:15,990 --> 00:04:20,380
set of configuration options let's say this looks pretty good.
64
00:04:20,470 --> 00:04:24,670
Now there's one or two more things I want to fix up inside of our project though quick pause right here
65
00:04:24,700 --> 00:04:26,370
and I'll see you in just a minute.
6887
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.