Sharing Data in Angular: Parent to Child

Jareem Hoff
Nov 5 · 3 min read

As Angular continues to grow, more and more users are starting to take on the challenge of learning this heavy set framework. One thing I had a huge challenge with when I first started using this framework was learning how to share data between components (I’m also stupid for not doing the hero app tutorial and just jumping right into it. So if you haven’t done that, I highly recommend that you do). This article will break everything down and make it as simple as possible for you to understand (you’re welcome).

Parent to Child Data Sharing

So this one is fairly easy, the most common way that most Angular Developers share data from a Parent Component to its child is via the @Input decorator. The @Input decorator allows you to define a property and bind data to it within the Parent’s HTML template.

Example:

In the Parent Component create a property with a message that you want to display in the child (also remember that this isn’t the only way to do this, this is an “example”. The idea is that you take what you’ve learned from this and apply it in a bunch of other clever ways. So don’t focus too much on “what” I’m doing but, more on the functionality and how I’m using it. I’ll be sure to summarize this later).

Here I created the property “parentMsg” to hold my string value.

Once you’ve done that, the next step would be to go into your Parent Component’s HTML template. In this template, you’re going to select the property from your components view element (or at least what it will be. In this case, I chose the name “child”) and set it equal to the “parentMsg” property that you just created by interpolation like so {{ parentMsg }}.

Here I “pre-created” the property child (this means it’s not created yet) and set it equal to the interpolated property — {{parentMsg}}.

Now let’s go into the Child Component and import the @Input decorator from @angular/core. Once imported you can now use the @Input decorator to create that property that we “pre-created” (also let’s be clear, this is not a real term used in angular, I just made it up just now while writing this article).

So as you can see I imported the @Input decorator, which will allow us to use it in the way that we did earlier when we “pre-created” (again not a real term) the child property.

Now that child property is currently holding (pay attention to the word “holding”) the value from “parentMsg”. So we can now do as we please with that value that’s within the child property.

What most developers would do afterward is interpolate child in the HTML template to display that value like so:

Implementing the same interpolation method as before, you can now display the value inside an element.
And the text that we created within “parentMsg”, shows up within Child Component. Perfecto!!!!

Summary:

So, remember how I said that you should think of more clever ways to implement this simple method? Well, this is literally just “passing data” from the Parent Component to the Child Component. This means you can pass other data types through as well, maybe an array with a bunch of other data right? With that you don’t even have to display it, maybe you would need to manipulate it and pass it to another property value and then display it? It’s all hypothetical but at the same time very possible to do. As a developer, you always want to be thinking of multiple uses for one thing even if it’s a simple little thing like the @Input decorator (in my opinion anyway).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade