All language subtitles for 13. Fixing Template References

All right.

In this video I'm inside of my app component a simple file.

We're going to make sure that we also take the image URL the user username and content of the other

two posts and pass those down to the other two card components.

But just a little bit of typing.

Let's get to it on my second app card.

I'm going to put some new lines inside of here to format it in the same way we had the first app card.

Then inside the second element to say that the image you URL for this copy of the card component is

going to come from posts at one dot image your URL.

We'll also do our user name

which will be posted at one dot user name.

And then finally our content will come from us at 1 not content.

Now we can repeat that same process on the last card as well.

But we will be referencing the third post inside of our poster array.

But once again I'm going to do a little bit of indentation here and then this time I'm just going to

copy image you URL username and content from the previous element and I'll throw that down like so and

then I will make sure that I update the index in here to the third element which is that index to do

pose it to you and to it.

Let's save this.

I'm gonna make sure that I've got all zeros all ones and all twos all.

Then go back over to my browser and we'll take a look at our application okay.

So back over here I do see it.

Neat treat snowy mountain and mountain biking but nothing else has been actually changed.

We still have everything else as the same exact content.

But why is that.

What we have passed down this information.

But remember we didn't actually open up that child component and make sure that we actually consumed

all that additional information inside the child components template file but just passing down this

information isn't enough.

We need to make sure that we open up that child components template file and actually reference these

different properties that are being passed down if we open up our card component template which is the

card component each nail file inside of here we still have the hardcoded image source we still have

the hardcoded user name and the hardcoded content as well so we need to go through to all three of those

and make sure we update them to refer to the different properties on our components as opposed to these

hard coded text.

Let's do that right now.

First off I'll find the user name right here.

I'm going to remove the nature.

I'm going to leave behind the at symbol because technically our user names didn't actually.

Let's see if I find my app component to yes file our user names don't actually have the app symbol inside

them but I do want to show that inside of my template I'm gonna put down at and then the curly braces

and user name that will end up printing out at nature out mountain biker and whatever else and for content

we can delete the hardcoded content and replace it with really curly content.

And then finally we need to make sure we update the image source as well.

Now in this case we are trying to set the property of an element as opposed to just like printing out

some raw information.

So in this case we're going to use our property bindings and tax as opposed to the interpolation syntax

because we want to set a property on an element though on that image we'll put inside of these square

brackets.

Source and then inside of our double quotes you'll refer to the image you are l remember as soon as

we add in the square brackets everything inside of those double quotes is now evaluated as code.

So when we write out image all right there that is a reference back to our card component class specifically

the image you are L property on their OK.

Let's save all these files now.

We'll go back over to our browser check out our application.

Now we've got the tree image titled neat tree nature I saw this tree today looks good.

The second has a different image different image and he's also have different handles or different user

names in different content as well.

Awesome.

So it looks like we are now correctly showing three different cards and each of them has their own set

of content inside.

We have successfully reused one single component and every time we used it we passed in a different

set of configuration options let's say this looks pretty good.

Now there's one or two more things I want to fix up inside of our project though quick pause right here

and I'll see you in just a minute.