How to update parent component from child component in angular2

Question

I am looking for an AngularJS ISolated (= operation) function with a similar function in Angular2.

I would like to change the value of the parent component in the child component, so that I do not need to use any EventEmitters.

my next piece of code.

<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 the value of [inputData] in component-2, which should be reflected in component-1.
In the existing @Output eventEmitter, I cannot find what element value has been changed.

Answer 1

Here I will show you how to identify the index of the item you are dealing with, and how to assign a new value to the item you are dealing with.

To assign a new value to row.inputData strong>, I am dealing with TWO-WAY data binding with @Input xxx ; and @Output xxxChange .

To determine the index of the item you are dealing with, I just use the new @output api.

follow 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