Communication from parent component to child component in angular

When you are coupling components and putting them one inside the other. This approach is useful and straightforward.

Therefore, It is a good approach when you want to ensure that a child component is integrated into a parent component that shares a particular object.

That means that if you change a property of the object, the object reference is still the same, so it is updated into the parent component. But if you change object reference in one component, the other one can’t detect an object change, so you will have a data misalignment.

So here I have explained step by step examples which is showing how to leverage this approach in your application.

First, we will need to provide custom attributes in the parent component and pass values to those attributes which we are going to use in our child component. Then, we will use @Input decorator to accept those data in our child component.

Let’s start with an example:

Parent Component (1):

import { Component } from '@angular/core';
@Component({   
        selector: 'parent',
        templateUrl: 'src/parent/parent.html'
})
export class ParentComponent {  
       public FirstName = ' ';  
       public LastName = ' ';
}

So for example (1) , we can see that we have defined two properties FirstName and LastName. Those two properties, we are going to pass in the child component. You will see in example (2), the parent component’s template.

Parent Component’s Template (2):

>

Here we have a parent component’s template for example (2). We have defined two HTML text inputs. So we want, the user needs to enter some text in these two text boxes, and then we are going to pass down those data into a child component. For that we have used ngModel directive to bind our data which FirstName and LastName.you can see, we have created two custom attributes which child1 and child2. In each custom attribute, we have created variable names and pass the values. Variable names are like communication channels between parent to child. And because of the “{{}}” bindings, any time input properties change, the updated values will be passed to the child component via variable names.

Now we will discuss how we are going to access those data in our child component.

Child1 Component (3) :

import {Component, Input } from '@angular/core';
@Component({  
        selector: 'child1', 
        templateUrl: 'src/child1/child1.html',
})
export class Child1Component { 
        @Input() FirstNameFromParent1 = ' ';  
        @Input() LastNameFromParent1 = ' ';
}

In Child1 component, we have used @Input decorator to declare properties FirstNameFromParent1 and  LastNameFromParent1 which are inputs from parent component.

Here in example (4), is how we can display those value in our child template:

Child1 Component’s Template (4):

<strong>FirstName: </strong>  {{FirstNameFromParent1}}
<strong>LastName: </strong>  {{LastNameFromParent1}}

Secondary, There is another way of accessing a value in child components using @Input decorator.

Let’s see child2 Component,

Child2 Component (5) :

import { Component, Input } from '@angular/core';
@Component({  
       selector: 'child2',  
       templateUrl: 'src/child2/child2.html'
})
export class Child2Component {  
      @Input('FirstNameFromParent2') fname = ' ';  
      @Input('LastNameFromParent2') lname = ' ';
}

However, In this case, we can “alias” the data that is passed down from the parent component. In the last example, we used those property names which we have defined in the child component. But in this case, we “alias” the data by passing a string to the @Input decorator.

Here in example (6), is how we can display those value in our child template:

Child2 Component’s Template (6):

<strong>FirstName: </strong>  {{fname}}
<strong>LastName: </strong>  {{lname}}

Conclusion:

In this article, we learned how to create a custom attribute in the parent component and using @Input decorator, how we can access data in the child component. We also discovered two different types of ways to access data in the child components.