All language subtitles for 12. Communicating from Parent to Child

In the last video we customize our card components by communicating some information from the app down

to the three individual children.

We went through those steps rather quickly.

So in this video I want to show you a more formalized diagram and help you understand the exact five

steps that are always going to go through.

Anytime you want to communicate some information from a parent component down to a child component you

are going to go through these series of five steps any time that you want to customize a child component.

OK so let's walk through these.

Everything began with no one right here where we found the parent component template and inside there

we found where we were creating the child component in our case the app component is the parent and

the card is the child and we wanted to communicate some information from the parent to the child.

Again we found the parent components template that is app component not HD e-mail and inside there.

We found where we were creating the child component that is the app dash card after that.

We then decided on some property name the piece of information that we wanted to use to communicate

from the parent to the child.

So in our case we had said that the name of this thing right here this piece of information we wanted

to share from the parent to the child was going to be title.

We also decided on property names of immaterial username content for the other things as well.

After that we wrote in some new property binding syntax to that child component and inside there.

We specify the data that we wanted to pass down that was right here.

This is our property binding syntax though inside the left hand side.

We put down the property name that we decided upon and then on the right hand side we put in the information

that we wanted to pass down to our card component.

Again that is step number three then in Step number four we open up the child components class file

because we had to declare an input property inside there.

Remember the idea behind step number four right here.

We kind of took a quick quick look at this example over here.

We had said that the input element inside of your normal l normal browser behavior knows how to take

a value property and use it to customize how that thing is displayed on the screen.

We have to do the same thing for our child component as well.

We have to teach our child component how to accept a given property and how to make use of it.

We found our component our child can Sunni or her child class file so many files to work with here.

Here's our child class file as the card component class.

Inside there we designated an input property that we imported the input decorator.

That's what this thing is called right here.

A decorator the input decorator tells angular that this property is going to be provided by the parent

component.

But this is kind of like where we are teaching.

The card component how to accept some piece of information then in step number five we open up the child

components template file and we referenced that input property that we had declared during step number

four that is inside of our card component HMO file.

We made use of the property that was passed down by using that interpolation syntax right there.

OK.

That's the five steps you're going to go through.

Anytime they want to communicate from a parent to a child really quickly just to give you kind of a

different perspective on this.

I want to go through the same thing very quickly using this diagram as well just to give you something

a little bit more visual.

The inside of our app template we write out the component that we wanted to create which was app card

and inside there we put down the property binding syntax and we specified the property that we wanted

to pass down.

We said we wanted to give the title property down to our card class that we set inside of those square

brackets.

Title is us at 0.

That title that looked up the first post inside the post array tied to our app components it pulled

off the title property and it passed that down as a piece of information to the card class instance

something like title is neat tree with an angular created a new instance of our card class.

That said this thing is going to have a title property because it was passed down the string of neat

tree from the parent.

That thing was going to be initialized to neat tree then our clerk heard class instance added its own

template and that template used the interpolation syntax referred to that title property that had been

defined on the component.

So again same series of steps right here.

Just kind of like a diagram or visual format as opposed to the series of steps.

So I would encourage you to remember this list right here as we're going to go through these steps many

many times inside this course.

Anytime that we want to communicate some information from a parent to a child component.

OK.

So now we understand this a little bit better.

Let's take a pause right here.

We still have to finish up a little bit of code inside of our app component template typically.

We need to make sure that we communicate the image URL username and content to those three or so to

me those two other app cards as well.

Quick pause and I'll see you in just a minute.