how to update parent component from child component in angular2

Question

I am looking for AngularJS ISolated(= operation) scope similar feature in Angular2.

I would like to change parent component value in child component, so that i don't need to use any EventEmitters.

following is my code snippet.

<component-1>
<div *ngFor="let row of listArray" >
    <component-2 [inputData]="row.inputData" (outputEvent)= "onComponentChange($event)"> </component-2>
</div>
<component-2 [inputData]="inputData2" (outputEvent)= "onComponentChange($event)"> </component-2>
<component-2 [inputData]="inputData3" (outputEvent)= "onComponentChange($event)"> </component-2>
<component-2 [inputData]="inputData4" (outputEvent)= "onComponentChange($event)"> </component-2>

@Component
component-1{
    onComponentChange(newValue){
        //where to keep the new value
        //this.inputData2/inputData3/inputData4/listArray[i].inputData ???????????
    }
}


@Component
component-2{
    @Input() inputData:string;
    @Output() outputEvent:EventEmitter<string>;
    changeComponentValue(newValue){
        this.outputEvent(newValue);
    }
}

I will change [inputData] value in component-2, that should reflect in component-1.
In existing @Output eventEmitter, I am unable to find which element value got changed.

Answer 1

Here i'm showing you how to identify an index of an element that you are dealing with and how to assign new value to an element you are dealing with.

To assign a new value to row.inputData I'm dealing with TWO-WAY data binding with @Input xxx; and @Output xxxChange syntax.

To Identify index of an element you are dealing with I'm just using a new @output api.

observe this code calmly.

@Component({
  selector: 'my-app',
  directives:[ChildComponent],
  template:`<h1>My First Angular 2 App</h1>
  <div *ngFor="let row of listArray" >
  {{row.inputData}}
  <component-2 [(inputData)]="row.inputData" (outputEvent)= "onComponentChange($event)"> </component-2>
  </div>
   `
})
export class AppComponent { 
 title="Angular1";

 listArray=[{inputData:"micronyks"},{inputData:"micronyks1"},{inputData:"micronyks3"}];

 onComponentChange(value){
   console.log(value);
   this.listArray.forEach((item,index)=>{
     if(item.inputData==value){
       console.log(index);
     }
   })
 }
}

component-2

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

@Component({
  selector: 'component-2',
  template:`<button (click)="changeComponentValue(inputData)">Click-{{inputData}}</button>`
})
export class ChildComponent { 
  @Input() inputData;
  @Output() outputEvent:EventEmitter<string>=new EventEmitter();
  @Output() inputDataChange=new EventEmitter();

  changeComponentValue(value){
        this.outputEvent.emit(value); //<---this will identify element index you are dealing with
        this.inputDataChange.emit("Angular2"); //<----new value will be assinged to an element that you are dealing with
    }
}

Working Demo : https://plnkr.co/edit/SqrfhtZZlSIsQE0Ko0oC?p=preview