Angular 2 : How to Pass data from Child Component to Parent Component

To Pass Data From Child Component to Parent and Parent Component to child Component use below code

I have Created 2 Component Parent and Child as shown in below Image

I added TextBox on Child Component and needs to use its value on parent Component

HTML For Child Component is as below

    <div class="container">
    <h2>Child Component</h2>
    <div class="form-group">
        <label for="email">Product Code:</label>
        <input type="text" #txtProductCode (keyup)="PassValueToParent(txtProductCode.value)">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </div>

Now to pass value of txtProductCode to parent we need to get TextBox Value and and pass its value
on EventEmitter with Output Parameter

Code for child.component.ts

import { Component, OnInit ,Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Output() childEmitter = new EventEmitter<string>();

  PassValueToParent(val:string)
  {    
    this.childEmitter.emit(val);
  }

  ngOnInit() {
  }

}

As shown in above code we imported Output and EventEmitter from @angular/core. Then we have created
new Event emitter @Output() childEmitter = new EventEmitter();
Here PassValueToParent gets updated txtProductCode Value on its keyup event and finaly function emit it.

We need to use same Output variable on Parent Page

Parent Page HTML will look like below code

<div class="container">
  <h2>Parent Component</h2>
  <div class="form-group">
    <label for="email">Value From Child Component :: {{parentVariable}}</label>
  </div>
</div>
<hr>
<app-child (childEmitter)='parentVariable=$event'></app-child>

Code For parent.component.ts

import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-parent’,
templateUrl: ‘./parent.component.html’,
styleUrls: [‘./parent.component.css’]
})
export class ParentComponent implements OnInit {

constructor() { }

parentVariable:string;

ngOnInit() {
}
}

In above code childEmitter is the name of emitter whhich we declare in Child Component
and parentVariable is a local variable in Parent Component

Once you implement above code you are able to pass value from Child Component to Parent Component as shown in below Image

Now Lets Pass Data From Parent Component to Child Component

Here important thing is @Input variable in Child Component which we need to declare

Code For Parent Component HTML

<div class="container">
  <h2>Parent Component</h2>
  <div class="form-group">
      <label for="text">Parent Name:</label>
      <input type="text" #txtParnetName (keyup)="SetParentName(txtParnetName.value)">
  </div>
</div>
<hr>
<app-child [childParentName]="parentName" ></app-child>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  parentName:string;

  SetParentName(textValue:string)
  {
    this.parentName = textValue;    
  }

  ngOnInit() {
  }
}

As shown in above Image we can see that we have pass value of Parent Component variable parentName in [childParentName] . Here [childParentName] is @Input variable for Child Component.

Code For Child Component

import { Component, OnInit , Input} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() childParentName:string;

  ngOnInit() {
  }

}

HTML for Child Component

<div class="container">
  <h2>Child Component</h2>
  <div class="form-group">  
      Name comes From Parent Component : <b> {{childParentName}} </b>
    </div>
</div>

Once you implemnent above code you are able to pass value from Parent Component to Child Component
as shown below.