We can use the [(x)]
syntax in the parent template to achieve two-way databinding with the child. If we create an Output property with the name xChange
, Angular will automatically update the parent property. We do need to emit()
an event whenever the child changes the value however:
import {Component, EventEmitter, Input, Output} from 'angular2/core'
@Component({
selector: 'child',
template: `
<p>Child sharedVar: {{sharedVar}}</p>
<input [ngModel]="sharedVar" (ngModelChange)="change($event)">
`
})
export class ChildComponent {
@Input() sharedVar: string;
@Output() sharedVarChange = new EventEmitter();
change(newValue) {
console.log('newvalue', newValue)
this.sharedVar = newValue;
this.sharedVarChange.emit(newValue);
}
}
@Component({
selector: 'parent',
template: `
<div>Parent sharedVarParent: {{sharedVarParent}}</div>
<child [(sharedVar)]="sharedVarParent"></child>
`,
directives: [ChildComponent]
})
export class ParentComponent {
sharedVarParent="hello";
constructor() { console.clear(); }
}
I used sharedVarParent
in the ParentComponent just to demonstrate that the names don’t have to be the same in the parent and child.