Angular LogoThe Angular @Input() decorator provides a channel by which a parent component can communicate with its child.

I think most Angular developers would agree that more of those smaller components that do one thing and do it well make for more manageable code, and a critical part of this design pattern is the parent-child communication. This is because, with more of the smaller chunks of code, nesting components becomes unavoidable. So, in this article, I’ll demonstrate how you can leverage Angular’s @Input() decorator to allow your parent components to smoothly pass information down to a child.

On a high-level, the communication channel is composed of mainly two parts: First, you provide custom attributes in the template code for your child components and pass references to values that you want to pass down. Then, you use the @Input() decorator to accept that data in the child component. Now there are two ways to leverage the @Input() decorator in your child component, and I’ll cover each one. For now, let’s just look at some code examples to see how these two pieces of the puzzle fit together.

Full Working Example Code

You can clone the full working example code here: https://github.com/kevinchisholm/video-code-examples

The Parent Component – Example # 1

In Example # 1 you’ll see the code for the parent component. Okay, now let’s take a look at lines # 8 and 9, where we expose two properties: userName and userPhone. Now we’ll consume those two properties in Example # 2, but for now, just be aware that in order to pass data down to the child component, we need to expose that data as properties on the parent component class.

The Parent Component’s Template – Example # 2

So here in Example # 2 we have the parent component’s template, and on line #s 1 and 6 there are two HTML text inputs. What we want now, is for the user to enter some text into these inputs, and then that data will be passed down to the child component. Notice how the ngModel directives for the texts input are assigned to the userName and userPhone properties. Then on line #s 11 and 15, we have the two child components. In each case, we have added a custom attribute to the child component’s HTML element. Now notice that the userName and userPhone properties are provided as values for the child1 component. And for the child2, component we use “theUserName” and “thePhone“. Okay, let’s put that aside for now, and we’ll discuss it in Example # 5.

But why are the custom attributes named “userNameFromParent” and “userPhoneFromParent” ? Well, these names are arbitrary; we could have just as easily named them “foo” and “bar”. The important thing to keep in mind is: the “userNameFromParent” and “userPhoneFromParent” custom attributes set up the communication channel. In other words: the “userNameFromParent” and “userPhoneFromParent” custom attributes are the connection to the child component class, and the userName and userPhone properties are the bindings for that data. And because of the “{{ }}” bindings, any time the userName and userPhone properties change, the updated values will be passed to the child component via the “userNameFromParent” and “userPhoneFromParent” custom attributes.

The Child 1 Component – Example # 3

Example # 3 contains the code for the child component, so let’s jump right to line #s 7 & 8. The @Input() decorator is used to declare that userNameFromParent and userPhoneFromParent properties are not just any old properties; they are inputs from the parent component (in this case, we have initialized them as an empty string). This is an important relationship, since the “userNameFromParent” and “userPhoneFromParent” custom attributes of the child template are connected to these class properties that are decorated with @Input(). This is that “communication channel” we covered earlier.

Child 1 Component’s Template – Example # 4

In Example # 4 we have the child component’s template, where there are only two lines of code, so things are pretty simple. But notice the userNameFromParent and userPhoneFromParent bindings. Importantly, this is where the template is bound to the two properties that we created with the two @Input() decorators. So if you go ahead and clone the GitHub repo listed above and run the code locally, you’ll see that when you enter some text into the two inputs of the parent component, that data is passed down to the child component and rendered in the UI.

The Child 2 Component – Example # 5

In Example # 5 we have the child 2 component, which I wanted to revisit, so I could demonstrate the 2nd option for how to leverage the @Input() decorator. In this case, we can “alias” the data that is passed down from the parent component. In other words, we defined the two data points as “userNameFromParent” and “userPhoneFromParent” in the parent component, and in Example # 4 and # 5, we used those property names verbatim in our child component template bindings. But in this case we “alias” the data by passing a string to the @Input() decorator. So, instead of @Input() PROPERTY_NAME = “”, we use the following syntax: @Input(PROPERTY_NAME) alt_property_name = “”.

So here we are saying to Angular: “I want to consume theUserName and thePhone, but I want to call it something different in my child component”. So now we have two properties: name and phone. But remember back in Example # 2, where we mentioned that we would discuss theUserName and thePhone? Well, this is where I want to revisit that part of the parent template. In this child 2 component, we are consuming theUserName and thePhone, which were passed down from the parent template, but we are declaring two new properties: name and phone.

Child 2 Component’s Template – Example # 6

In Example # 6 we have the child 2 component’s template, and as you have probably guessed by now, this is where we are consuming the name and phone properties. When you run the working code in your browser, you’ll see that just as with the child 1 component, whatever you type in the text inputs will be rendered in this child 2 template. The difference is that we took a slightly different approach with the @Input() decorator, creating two new properties.

Summary

In this article, we learned how to use the Angular @Input() decorator to pass data from a parent component to a child component. We also learned how to set the custom attributes in the parent components’ template and bind values from the parent in order to set up the data flow. Then, we covered the @Input() decorator’s syntax, learning how to receive the data in the child component. And finally, we discussed the two ways of using the @Input() decorator so that you can have the option of aliasing the child component’s properties.

5 Comments

Comments are closed.