two way data binding in angular2 from parent component to child component

Question

I am passing an object from parent to child. In child I am making changes to this object. Now , whenever I am making a change to this object in child, It should reflect in parent. For ex. while loading child component :

<child [record]="record"></child>

Now when I am changing record in child.I want it to reflect in parent.

any way to achieve this? thanks.

Answer 1

The child component needs an @Input() and @Output() for two-way binding to work

@Component({
  selector: 'child',
  ...
})
export component MyChild {
  @Input() record;
  @Output() recordChange = new EventEmitter();

  updateRecord(newRecord) {
    this.record = newRecord;
    this.recordChange.emit(this.record);
  }
}

For [(record)]="...." to work it is important that input and output have the same base name ('record') and the output has the suffix Change otherwise you would need to longer syntax

[record]="..." (recordUpdated)="..." 

(assuming the output is named recordUpdated)

Answer 2

If you are not reassigning record in the child – i.e., you are not doing something like this.record = newRecord; – then what you have should work fine.

Since you are passing a JavaScript reference type (an object) to the child, any changes you make to the properties of the object in the child – e.g., this.record.property1 = someNewValue; – will be "seen" by the parent because both the parent and the child have a reference to the same record object. There is only one record object that is being manipulated.

If you are reassigning record in the child (or if record was instead a primitive type such as an integer, string, or boolean), then see @Günter's answer. In this case, there are multiple record objects involved, so you have to tell the parent when the child starts using a new object.

Answer 3

Have you tried the banana in the box syntax:

 <child [(record)]="record"></child>