angular2 pass ngModel to a child component

Question

I have ParentComponent and a ChildComponent, and I need to pass the ngModel in ParentComponent to ChildComponent.

// the below is in ParentComponent template         


        

Answer 1

For Parent -> Child, use @Input

For Child -> Parent, use @Output

So to use both:

In the Parent Component

Typescript:

  onValueInParentComponentChanged(value: string) {
    this.valueInParentComponent = value;
  }

Html

In the Child Component

Typescript:

export class ChildComponent {  
   @Input() valueInParentComponent: string;
   @Output() onValueInParentComponentChanged = new EventEmitter();
} 

onChange(){
  this.onValueInParentComponentChanged.emit(this.valueInParentComponent);
}

Html

Full Example

https://plnkr.co/edit/mc3Jqo3SDDaTueNBSkJN?p=preview

Other ways to accomplish this:

https://angular.io/docs/ts/latest/cookbook/component-communication.html