Component - grungy wooden headline on Maple  - 3D rendered royalty free stock image. This image can be used for an online website banner ad or a print postcard.

Angular @Input()

One of the ways we can pass data from a parent to a child is by using the @Input decorator. The data passed can be in any form. Let’s examine how to do this in code…

Since AppComponent is utilizing <app-child>, it is the parent component to the AppChildComponent. To send data, the @Input decorator uses the child component properties. To accomplish this feature, we have to alter the child component as follows…

So I altered the yourName property by adding the @Input decorator. This allows this property to be set from the parent component. Now we need to change the parent component to pass the data to the child…

In the parent component, I am setting the value of the child’s yourName property in the <app-child> element. To get this done, I am passing the data to the child component property inside the square brackets and assigning a value. I could hard code the value in the quotes within the element, or use a parent property as I have done here.

Happy Coding!

Clay Hess

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
Skip to content