Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,450 --> 00:00:01,800
All right.
2
00:00:01,810 --> 00:00:05,920
Now that we've got our array of postal objects here we're going to make sure that we take each of these
3
00:00:05,920 --> 00:00:06,660
objects.
4
00:00:06,700 --> 00:00:08,250
We're going to take all the properties out of each.
5
00:00:08,260 --> 00:00:12,010
And we're gonna pass them down to new instances of our card components.
6
00:00:12,010 --> 00:00:17,320
But to do so we're gonna use that same property binding syntax that we discussed in the first application
7
00:00:17,350 --> 00:00:19,360
we worked on to get started.
8
00:00:19,360 --> 00:00:23,250
I'm going to go back to my app component dot HDL file inside of here.
9
00:00:23,260 --> 00:00:26,600
I've got three copies of my app card component.
10
00:00:26,680 --> 00:00:31,010
We're gonna first start working on the first element right here though on that first element.
11
00:00:31,180 --> 00:00:37,140
I'm going to give myself a little bit of space by opening up that first opening tag and then inside
12
00:00:37,140 --> 00:00:43,110
there I'm going to try to pass down four separate properties out of that first post object I'm going
13
00:00:43,110 --> 00:00:49,410
to pass down the property of title material user name and content and we're going to pass all that data
14
00:00:49,410 --> 00:00:52,640
down using that property finding syntax.
15
00:00:52,860 --> 00:00:57,360
The one app Desh card right here I'm going to use the property binding syntax by placing down those
16
00:00:57,360 --> 00:00:58,770
square brackets.
17
00:00:58,890 --> 00:01:05,370
I'm going to say that I want to communicate a title into the app Card element when we put down the square
18
00:01:05,370 --> 00:01:06,060
brackets.
19
00:01:06,060 --> 00:01:11,130
Remember we then put down our equals sign and the double quotes and whatever we write out inside those
20
00:01:11,130 --> 00:01:15,950
double quotes is going to be evaluated as code inside those double quotes in particular.
21
00:01:16,080 --> 00:01:23,380
We have free access to all of the different properties of our app component class the inside of here.
22
00:01:23,550 --> 00:01:32,070
I can reference those at zero dot title and that will give me the title property off of that first object
23
00:01:32,100 --> 00:01:33,290
right there.
24
00:01:33,540 --> 00:01:39,340
We can now repeat that process with all the other properties inside of here as well but I will also
25
00:01:39,340 --> 00:01:46,060
say I want to set the image you are L property and that's going to come from posts at zero dot image
26
00:01:46,460 --> 00:01:50,710
you are L I want to set the username
27
00:01:54,150 --> 00:02:02,920
that will be post at zero not user name and then finally our content which will be posted at zero not
28
00:02:03,070 --> 00:02:08,800
content now as soon as I start to add this in you'll notice that the first property that I added in
29
00:02:08,800 --> 00:02:15,340
was looks taller okay but these three others are getting that red underline if you don't see any red
30
00:02:15,370 --> 00:02:20,920
underline or any errors inside of here that is totally fine depending upon the version of Visual Studio
31
00:02:20,920 --> 00:02:27,210
code you're using you may or may not see that little underline the red underline here if I hover over
32
00:02:27,210 --> 00:02:33,420
it it's going to tell me that I can not bind this property because it's not a property of app dash cart
33
00:02:34,170 --> 00:02:36,240
though what does this really mean.
34
00:02:36,240 --> 00:02:42,270
Well right now we are trying to set a property on a component that you and I have put together right
35
00:02:42,270 --> 00:02:42,660
now.
36
00:02:42,780 --> 00:02:48,570
Unfortunately we have not defined any of these properties of image URL or user name or content on our
37
00:02:48,570 --> 00:02:50,170
card elements.
38
00:02:50,290 --> 00:02:55,200
Let me give you a little quick side example to help you understand why angular is really complaining
39
00:02:55,200 --> 00:03:02,400
here inside my browser to give you a very quick demonstration over on code pin you do not have to write
40
00:03:02,400 --> 00:03:06,920
out this example is just a really quick example I want to show you very quickly.
41
00:03:07,080 --> 00:03:14,840
All right I'm gonna put together just a little bit of CSX here just to make sure you can see this example.
42
00:03:14,930 --> 00:03:15,200
All right.
43
00:03:15,320 --> 00:03:21,140
So then inside of this javascript fabric here I'm going to try to create an input element to create
44
00:03:21,140 --> 00:03:26,870
an input element with raw javascript code we would write out constant put is document that create element
45
00:03:27,800 --> 00:03:34,900
input I could then show that input element on the screen by running out document dot body append child
46
00:03:35,650 --> 00:03:40,850
input now as soon as that shows up I'm going to see an empty input right there.
47
00:03:40,850 --> 00:03:46,280
Let's imagine for a second that we wanted to set a value here javascript inside of here and we want
48
00:03:46,280 --> 00:03:49,000
that value to show up automatically inside there.
49
00:03:49,130 --> 00:03:55,270
To do so we would write out input what value is and then some string to show inside so I've now set
50
00:03:55,300 --> 00:04:02,620
a property on the input element the input element as defined inside of your browser knows automatically
51
00:04:02,680 --> 00:04:08,950
how to take the value property and how to customize itself and make use of that value property as soon
52
00:04:08,950 --> 00:04:14,620
as you say input dot value and then show it in the DOM your browser is going to say Oh okay I'm displaying
53
00:04:14,620 --> 00:04:19,810
this thing in the in the DOM I'm going to draw out the input box I'm going to take a look at the value
54
00:04:19,810 --> 00:04:25,600
property take whatever string that is and show it inside the input that's kind of a similar situation
55
00:04:25,600 --> 00:04:32,910
to it we are in right now the browser knows how to take that value property and make use of it however
56
00:04:33,180 --> 00:04:40,230
art card components that we have put together has no idea no recollection no implementation of how to
57
00:04:40,260 --> 00:04:46,620
accept or make use of the image your l the user name or the content properties but nothing inside of
58
00:04:46,620 --> 00:04:51,900
our card component has any idea how to receive these values and make use of them to customize the card
59
00:04:51,900 --> 00:04:57,690
component we have to tell that card component that it should expect to receive these properties we have
60
00:04:57,690 --> 00:05:04,410
to tell it what to do with them when it receives them to do so we're going to open up our card component
61
00:05:04,470 --> 00:05:12,470
template for our senior class file by we'll find card dock component dot yes here's our card component
62
00:05:12,480 --> 00:05:13,410
class.
63
00:05:13,490 --> 00:05:14,280
The inside of here.
64
00:05:14,310 --> 00:05:19,110
We're going to add in just a little bit of code to instruct this component on how to receive those different
65
00:05:19,110 --> 00:05:22,300
properties at the very top of the file.
66
00:05:22,300 --> 00:05:26,840
We're going to find the import statements after on init.
67
00:05:26,970 --> 00:05:30,440
I'm gonna add a comma and then I'm also going to input this irks me.
68
00:05:30,440 --> 00:05:35,950
Import this thing called input then inside of my class of card component.
69
00:05:35,950 --> 00:05:41,650
We're going to add in all lines of code that's going to instruct this component how to receive these
70
00:05:41,870 --> 00:05:50,120
or different properties the inside of you're going to say at input input in a set of parentheses and
71
00:05:50,120 --> 00:05:52,130
then a name of one of those properties.
72
00:05:52,130 --> 00:05:59,090
So first off title and then going to give title a default value of empty string.
73
00:05:59,120 --> 00:06:04,190
Then repeat that process three more times for those other three properties that we're trying to pass
74
00:06:04,190 --> 00:06:04,730
in.
75
00:06:04,920 --> 00:06:09,710
I'm going to copy paste that down three times and then the second one I will update to image your URL
76
00:06:11,080 --> 00:06:12,460
and contents.
77
00:06:12,670 --> 00:06:19,870
And then finally username this right here is what instructs our class card component and it's going
78
00:06:19,870 --> 00:06:24,790
to receive these four different properties whenever we try to create it from some other components template
79
00:06:24,790 --> 00:06:25,660
file.
80
00:06:25,780 --> 00:06:30,580
If I now go back over to my template file for app component dot each team l I no longer see any red
81
00:06:30,640 --> 00:06:35,770
underlines there and again this is because we have instructed the card component on how to receive these
82
00:06:35,770 --> 00:06:42,770
different properties but now that our card component has received this data and has access to that data
83
00:06:43,850 --> 00:06:48,320
these are properties that are tied to the card component and just like any other properties or any other
84
00:06:48,320 --> 00:06:53,570
methods that are tied to a component we can now refer to these properties and their values inside of
85
00:06:53,570 --> 00:06:55,700
this components template.
86
00:06:55,820 --> 00:07:00,260
We're going to open up our card component template file that's our card Doc component.
87
00:07:00,290 --> 00:07:06,560
Each team will file and then inside of here we can write out our normal types of template syntax such
88
00:07:06,560 --> 00:07:12,470
as property binding or interpolation to refer to those four different properties we have now defined
89
00:07:12,590 --> 00:07:14,680
on our card components.
90
00:07:14,750 --> 00:07:20,060
Let's first try taking that title property and showing it inside of our card component template the
91
00:07:20,120 --> 00:07:21,770
inside of my card component template.
92
00:07:21,770 --> 00:07:27,450
Also the or I'll find the paragraph element right there that currently shows a hardcoded neat tree.
93
00:07:27,680 --> 00:07:33,290
I'm then going to delete that I'll replace it with a set of double curly braces and I will refer to
94
00:07:33,350 --> 00:07:41,570
title now calling or something curly brace title right here is going to refer to the title property
95
00:07:41,960 --> 00:07:47,900
on our card component and this property right here is being assigned when this component gets created
96
00:07:48,170 --> 00:07:51,770
from our app component template file right there.
97
00:07:51,770 --> 00:07:56,960
Now I know this whole process is like streaming over three different files and so it's kind of confusing
98
00:07:56,960 --> 00:08:01,380
to see right now in this video I just want to give you like a very quick overview of the syntax we're
99
00:08:01,380 --> 00:08:05,990
going to do a deeper dive in just a moment but right now let's save all these files.
100
00:08:05,990 --> 00:08:09,080
I'm gonna go back over to my browser now.
101
00:08:09,090 --> 00:08:14,140
If I refresh the page I can see that the first card has a title of neat tree.
102
00:08:14,140 --> 00:08:16,920
The other two cards don't have any titles at all.
103
00:08:16,950 --> 00:08:22,530
That's because if you go back to our app component the other two cards that are being displayed are
104
00:08:22,530 --> 00:08:24,890
not receiving a title property.
105
00:08:24,900 --> 00:08:31,270
Instead those other two cards are using the default value of title of empty string you can find those
106
00:08:31,270 --> 00:08:34,860
two of their cards and we'll try defining the title property on both them really quickly.
107
00:08:34,870 --> 00:08:44,650
So we'll say posts at 1 title and title is always at two not title and then if we save this look back
108
00:08:44,650 --> 00:08:51,680
over will now see me tree no mountain and mountain biking OK.
109
00:08:51,690 --> 00:08:56,570
So in this video we kind of do like a very winding path about to eventually take some properties out
110
00:08:56,570 --> 00:09:00,090
those objects and get them displayed inside of our different carts.
111
00:09:00,090 --> 00:09:01,140
Let's take a pause right here.
112
00:09:01,170 --> 00:09:05,370
When we come back the next video I'm going to give you a deeper understanding and a deeper explanation
113
00:09:05,580 --> 00:09:07,560
of exactly what we did in this video.
13146
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.