Update The Child Component And Parent Component Using @Input & @Output In Angular

This blog will show you how to pass the value from Parent Component to Child Component. And based on that value Child Component, performs operation and returns new value to Parent Component in Angular 4+

I have tried to make this concept as simple as possible. I hope anyone not clear with @Input and @Output decorators of Angular will understand after going through this blog.

 

Basic usage of @Input and @Output Decorators -

• @Input - To pass data from Parent to Child Component
• @Output - To pass data from Child to Parent Component

I have created 2 Components - TestParentComponent and TestChildComponent.

Task

I will add 2 numbers in the Parent component and pass that total value to the Child component. Later, using that value, I will perform the multiplication of text.

Input the value in Child Component and pass that updated value to the Parent Component.

Let's understand @Input to pass the data from Parent to Child Component by adding 2 numbers in Parent.

After generating, the component will be something like below.

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-test-parent',
    templateUrl: './test-parent.component.html',
    styleUrls: ['./test-parent.component.css']
})
export class TestParentComponent implements OnInit {}

Now, first we will add two textboxes in test-parent.component.html file so that we can get the input values and perform the addition operation.

<p> Parent Component </p>
<div class="form-group">
    <input type="text" class="form-control" placeholder="Number1" (input)="getTotalAmt()" [(ngModel)]="num1" name="num1" id="num1" />
</div>
<div class="form-group">
    <input class="form-control" placeholder="Number2" type="text" (input)="getTotalAmt()" [(ngModel)]="num2" name="num2" id="num2" />
</div>

As you can see, I have added two text inputs which call the getTotalAmount() method on the input event. Now, I am updating the Parent class to perform the addition.

export class TestParentComponent implements OnInit {
    num1: string;
    num2: string;
    Total: number;
    constructor() {}
    ngOnInit() {}
    ConvertToInt(val: string): number {
        return parseInt(val);
    }
    getTotalAmt() {
        this.Total = this.ConvertToInt(this.num1) + this.ConvertToInt(this.num2);
    }
}

You will see the similar output shown below as per your inputs.

 

Now, we will update the child component's HTML and add to the Parent. 

<p> Child Component </p>
<div class="form-group">
    <input type="text" class="form-control" placeholder="Number3" />
</div>
<app-test-child></app-test-child> <!-- In test-parent.component.html add this code -->

You will see the output as shown below.

 

 

 

Now, I want to pass the Total to Child Component and perform the multiplication with Number 3 and update the Total in Parent.

 

Since I want to pass the Total from parent, I will add [Addition] as binding property in Parent component's HTML. And I will use the same as @Input variable for retrieving the data in Child.

<app-test-child [Addition]="Total" ></app-test-child>

Updating the Child Class.

import {
    Component,
    OnInit,
    Input
} from '@angular/core';
export class TestChildComponent implements OnInit {
    @Input() Addition: number; //Note you need to import Input from @angular/core
    constructor() {}
    ngOnInit() {}
}

To check if the addition variable is receiving the Total from Parent, you can simply create an interpolation and bind the Addition variable like this  {{Addition}} in Child Component's HTML file and see the output.

<p>From Parent - {{Addition}}</p>

Now, we will see the use of @Output to send the updated Total back to the Parent Component.

 

Let's update the Child Component class file. We will use Output and EventEmitter class for this. 

 

EventEmitter is used to emit the data to the Parent component.

import {
    Component,
    OnInit,
    Input,
    EventEmitter,
    Output
} from '@angular/core';
@Component({
    selector: 'app-test-child',
    templateUrl: './test-child.component.html',
    styleUrls: ['./test-child.component.css']
})
export class TestChildComponent implements OnInit {
    @Input() Addition: number;
    @Output() valueUpdate = new EventEmitter();
    constructor() {}
    ngOnInit() {}
    updateValue(val) {
        this.valueUpdate.emit(val * this.Addition);
    }
}

We declare valueUpdate as new EventEmitter and utilizie this to emit the data in updateValue() method. 

 

updateValue will get the input from Child Html file and perform the Multiplication. 

<input type="text" class="form-control" [(ngModel)]="num3" (input)="updateValue(num3)" placeholder="Number3"/>

Finally we need to update the parent html and class file to update these values as shown below.

<app-test-child [Addition]="Total" (valueUpdate)="getUpdatedvalue($event)"></app-test-child>

TestParentComponent Class,

getUpdatedvalue($event) {
    console.log($event);
    this.Total = $event;
}

That's it! You will see the below output,

 

Add 2 numbers in Parent as shown below,

 

 

Now, add Number 3 to multiply with the total and the same will be updated in Parent.