Dhananjay Kumar

In Angular 2 a component can share data and information with another component by passing data or events. A component can be used inside another component, thus creating a component hierarchy. The component being used inside another component is known as the child component and the enclosing component is known as the parent component. Components can communicate to each other in various ways, including:

• Using @Input()
• Using @Output()
• Using Services
• Parent component calling ViewChild
• Parent interacting with child using a local variable

In this article, we will focus on how a child component can interact with a parent component using the @Input() property. We’ll also look into intercepting the input message and logging changes in the input message.

Let us consider the components created in the listing below. We have created a component called AppChildComponent, which will be used inside another component.

We have also created another component called AppComponent. Inside AppComponent, we are using AppChildComponent:

In the above listings, AppComonent is using AppChildComponent, hence AppComponent is the parent component and AppChildComponent is the child component.

Passing data from parent component to child component

Let us start with passing data from the parent component to the child component. This can be done using the input property. @Input decorator or input properties are used to pass data from parent to child component. To do this, we’ll need to modify child AppChildComponent as shown in the listing below:

As you notice, we have modified the greetMessage property with the @Input() decorator. Also, we have implemented onInit, which will be used in demos later. So essentially, in the child component, we have decorated the greetMessage property with the @Input() decorator so that value of greetMessage property can be set from the parent component.

Next, let us modify the parent component AppComponent to pass data to the child component.

From the parent component, we are setting the value of the child component’s property greetMessage. To pass a value to the child component, we need to pass the child component property inside a square bracket and set its value to any property of parent component. We are passing the value of childmessage property from the parent component to the greetMessage property of the child component.

Intercept input from parent component in child component

We may have a requirement to intercept data passed from the parent component inside the child component. This can be done using getter and setter on the input property.

Let us say we wish to intercept an incoming message in the child component, and combine it with some string. To achieve this, we created a property called _greetmessage and using @Input() decorator creating getter and setter for _greetmessage property. In the getter, we’re intercepting the input from the parent component and combining it with the string. This can be done as shown in the next listing:

In the setter, we are manipulating incoming data from the parent component and appending some text to that. Keep in mind that the behavior of the parent component would not change whether we are intercepting the message or not. To explore it further, let us take another example and create a child component, which will display names passed from the parent. If the parent passes empty name value, then the child component will display some default name. To do this, we have modified the setter in the child component. In the setter, we are checking whether the name value is passed or not. If it is not passed or it is an empty string, the value of name would be assigned to a default value. The child component can be created as shown in the listing below:

Read full article on the Infragistics blog