Angular2 : two way binding inside parent/child component

Question

Version: \"angular2\": \"2.0.0-beta.6\"

I would like to implement a two way binding inside a parent/child component case.

On my child component, I\'m using t

Answer 1

You need to use input / output elements in the child component, as described below:

@Component({
  selector:'input-test'
  template: `
    

    {{name}}
      
      Go
    
  `
})
export class InputTestComponent {
  @Input()
  name:string;

  @Output()
  nameChange:EventEmitter = new EventEmitter();
}

When a change is detected, you need to fire an event using the EventEmitter:

onSubmit() {
  this.nameChange.emit(this.name);
}

This way the bound element of the parent component will be automatically updated when using the following syntax:

You can notice that you can leverage, the ngModelChange event if you want to detect input change instead of using form submission:

@Component({
  selector:'input-test'
  template: `
    

    {{name}}
      
    
  `
})
export class InputTestComponent {
  @Input()
  name:string;

  @Output()
  nameChange:EventEmitter = new EventEmitter();

  onChange(newName) {
    this.name = newName;
    this.nameChange.emit(this.name);
  }
}