Communication Between Components Using Input decorator in Angular

In Angular app development, We all come across a situation to share data and information with another component. A component can share data to each other in various ways, these are:

1. Using @Input()
2. Using @Output()
3. Using Services
4. Parent component calling ViewChild
5. Parent interacting with a child using a local variable

A component can be used inside another component, thus creating a component hierarchy. The component used inside is known as the child component and the enclosing component is known as the parent component.  Today, In this demo, We will discuss the sharing of data from parent to child component using the @Input decorator, We will also looking into a modification of the input message and logging in the input message. In the image at top, you can understand the data flow.

Let's proceed step by step

 1. Create a basic angular app 

after that switch to the project folder with cd /data-communication-via-input. Once we create app with ng new then a default component is generated, we will use that component as parent component and create a new component for using as a child component.

For easy understading we will do all stuffs in ts file only, will not use html files.

2. start with passing data from the parent component to the child component

made change in parent component, app.component.ts.Let's have look in the code inside it:

In the parent component, at the top we have imported child component for communication from parent to child component. After that in the component decorator we have removed templatedUrl & styleUrls. And set html code in template to make the stuffs easy. In the template we have child component selector tag with the key which value we want to pass in child component and modify it later in child component. Under the exported class we have set value of two variables message(which we want to show from parent component) and childmessage(which we want to send in child component).

After making changes in parent component, now we need to make changes inside the child component.

Since we have to receive data from parent component, For this we need getter( to receive data from parent component) and setter (to modify the received data from parent component) on the input property.

Suppose we want to intercept an incoming message in the child component and modify it with some string.  To achieve this, we created a property called _greetmessage and using @Input() decorator creating getter and setter for the _greetmessage property. In the getter, we are intercepting the input from the parent component and combining it with the string. This can be done as shown in the code below

Let's have a look inside the child component, appchild.component.ts

Here in the above child component file, I have set template key to set the html code in ts file. In html code we have used variable which have been modified in the setter method of input decorator.

Conclusion

In this article, we learned to create demo how to communicate from a parent component to a child component. We also saw how to intercept the input message and log changes. In further demos, we will explore with other types of component communication.

That’s all for now. Thank you for reading and I hope this post will be very helpful for communcating data from parent component to child component.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.