All language subtitles for 11. Accepting Data in a Child Component3

All right.

Now that we've got our array of postal objects here we're going to make sure that we take each of these

objects.

We're going to take all the properties out of each.

And we're gonna pass them down to new instances of our card components.

But to do so we're gonna use that same property binding syntax that we discussed in the first application

we worked on to get started.

I'm going to go back to my app component dot HDL file inside of here.

I've got three copies of my app card component.

We're gonna first start working on the first element right here though on that first element.

I'm going to give myself a little bit of space by opening up that first opening tag and then inside

there I'm going to try to pass down four separate properties out of that first post object I'm going

to pass down the property of title material user name and content and we're going to pass all that data

down using that property finding syntax.

The one app Desh card right here I'm going to use the property binding syntax by placing down those

square brackets.

I'm going to say that I want to communicate a title into the app Card element when we put down the square

brackets.

Remember we then put down our equals sign and the double quotes and whatever we write out inside those

double quotes is going to be evaluated as code inside those double quotes in particular.

We have free access to all of the different properties of our app component class the inside of here.

I can reference those at zero dot title and that will give me the title property off of that first object

right there.

We can now repeat that process with all the other properties inside of here as well but I will also

say I want to set the image you are L property and that's going to come from posts at zero dot image

you are L I want to set the username

that will be post at zero not user name and then finally our content which will be posted at zero not

content now as soon as I start to add this in you'll notice that the first property that I added in

was looks taller okay but these three others are getting that red underline if you don't see any red

underline or any errors inside of here that is totally fine depending upon the version of Visual Studio

code you're using you may or may not see that little underline the red underline here if I hover over

it it's going to tell me that I can not bind this property because it's not a property of app dash cart

though what does this really mean.

Well right now we are trying to set a property on a component that you and I have put together right

now.

Unfortunately we have not defined any of these properties of image URL or user name or content on our

card elements.

Let me give you a little quick side example to help you understand why angular is really complaining

here inside my browser to give you a very quick demonstration over on code pin you do not have to write

out this example is just a really quick example I want to show you very quickly.

All right I'm gonna put together just a little bit of CSX here just to make sure you can see this example.

All right.

So then inside of this javascript fabric here I'm going to try to create an input element to create

an input element with raw javascript code we would write out constant put is document that create element

input I could then show that input element on the screen by running out document dot body append child

input now as soon as that shows up I'm going to see an empty input right there.

Let's imagine for a second that we wanted to set a value here javascript inside of here and we want

that value to show up automatically inside there.

To do so we would write out input what value is and then some string to show inside so I've now set

a property on the input element the input element as defined inside of your browser knows automatically

how to take the value property and how to customize itself and make use of that value property as soon

as you say input dot value and then show it in the DOM your browser is going to say Oh okay I'm displaying

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

property take whatever string that is and show it inside the input that's kind of a similar situation

to it we are in right now the browser knows how to take that value property and make use of it however

art card components that we have put together has no idea no recollection no implementation of how to

accept or make use of the image your l the user name or the content properties but nothing inside of

our card component has any idea how to receive these values and make use of them to customize the card

component we have to tell that card component that it should expect to receive these properties we have

to tell it what to do with them when it receives them to do so we're going to open up our card component

template for our senior class file by we'll find card dock component dot yes here's our card component

class.

The inside of here.

We're going to add in just a little bit of code to instruct this component on how to receive those different

properties at the very top of the file.

We're going to find the import statements after on init.

I'm gonna add a comma and then I'm also going to input this irks me.

Import this thing called input then inside of my class of card component.

We're going to add in all lines of code that's going to instruct this component how to receive these

or different properties the inside of you're going to say at input input in a set of parentheses and

then a name of one of those properties.

So first off title and then going to give title a default value of empty string.

Then repeat that process three more times for those other three properties that we're trying to pass

in.

I'm going to copy paste that down three times and then the second one I will update to image your URL

and contents.

And then finally username this right here is what instructs our class card component and it's going

to receive these four different properties whenever we try to create it from some other components template

file.

If I now go back over to my template file for app component dot each team l I no longer see any red

underlines there and again this is because we have instructed the card component on how to receive these

different properties but now that our card component has received this data and has access to that data

these are properties that are tied to the card component and just like any other properties or any other

methods that are tied to a component we can now refer to these properties and their values inside of

this components template.

We're going to open up our card component template file that's our card Doc component.

Each team will file and then inside of here we can write out our normal types of template syntax such

as property binding or interpolation to refer to those four different properties we have now defined

on our card components.

Let's first try taking that title property and showing it inside of our card component template the

inside of my card component template.

Also the or I'll find the paragraph element right there that currently shows a hardcoded neat tree.

I'm then going to delete that I'll replace it with a set of double curly braces and I will refer to

title now calling or something curly brace title right here is going to refer to the title property

on our card component and this property right here is being assigned when this component gets created

from our app component template file right there.

Now I know this whole process is like streaming over three different files and so it's kind of confusing

to see right now in this video I just want to give you like a very quick overview of the syntax we're

going to do a deeper dive in just a moment but right now let's save all these files.

I'm gonna go back over to my browser now.

If I refresh the page I can see that the first card has a title of neat tree.

The other two cards don't have any titles at all.

That's because if you go back to our app component the other two cards that are being displayed are

not receiving a title property.

Instead those other two cards are using the default value of title of empty string you can find those

two of their cards and we'll try defining the title property on both them really quickly.

So we'll say posts at 1 title and title is always at two not title and then if we save this look back

over will now see me tree no mountain and mountain biking OK.

So in this video we kind of do like a very winding path about to eventually take some properties out

those objects and get them displayed inside of our different carts.

Let's take a pause right here.

When we come back the next video I'm going to give you a deeper understanding and a deeper explanation

of exactly what we did in this video.