Angular 2 Component with ngModel not updating parent model

Question

I am trying to create a wrapper component for inputs such as a checkbox but I cannot get the parent (inputValue) variable to change, even though it is set as an ngModel.

This is my component definition:

@Component({
selector: 'my-checkbox',
inputs: ['inputValue', 'label'],    
template: `
    <div class="ui checkbox">
      <input type="checkbox" name="example" [(ngModel)]="inputValue" (change)="onChange($event)">
      <label>{{label}}</label>
    </div>`
})

export class CheckboxComponent {    

inputValue: boolean;

onChange(event) {
    this.inputValue = event.currentTarget.checked;
    console.log(this.inputValue);
}}

And I am using it like this in the parent view:

<my-checkbox [inputValue]="valueToUpdate" [label]="'Test Label'"></my-checkbox>

The console does log correctly and I can see that the internal (inputValue) is updating but not the external 'valueToUpdate' (the ngModel two-way binding is not updating correctly).

Thierry Templier · Accepted Answer · 2016-02-24 07:53:59Z

6

You need to define an output for your component and use the EventEmitter class to fire the corresponding event.

@Component({
  selector: 'my-checkbox',
  inputs: ['inputValue', 'label'],    
  outputs: ['inputValueChange']
  template: `
    <div class="ui checkbox">
      <input type="checkbox" name="example" [(ngModel)]="inputValue" (change)="onChange($event)">
      <label>{{label}}</label>
    </div>`
})
export class CheckboxComponent {    

  inputValue: boolean;
  inputValueChange: EventEmitter<any> = new EventEmitter();

  onChange(event) {
    this.inputValue = event.currentTarget.checked;
    console.log(this.inputValue);
    this.inputValueChange.emit(this.inputValue);
  }
}

This way you will be able to use two binding for your sub component:

<my-checkbox [(inputValue)]="valueToUpdate" [label]="'Test Label'">
</my-checkbox>

edited Feb 24, 2016 at 7:53

answered Feb 23, 2016 at 14:56

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Rajcok Over a year ago

Have a look at my answer for some suggested improvements. Feel free to incorporate them into your answer, if you like them.

EnlitenedZA Over a year ago

Good answer, thank you! The documentation really still needs work!

EnlitenedZA Over a year ago

Just to add brevity, the EventEmitter needs to be declared with a type, i.e: inputValueChange: EventEmitter<any> = new EventEmitter(); otherwise Typescript will complain.

Thierry Templier Over a year ago

Yes, you're right! Without this, you'll have an error during compilation but this doesn't prevent from executing the code ;-) Thanks for the remark! I updated my answer accordingly...

Mark Rajcok · Accepted Answer · 2016-02-23 16:59:02Z

4

Follow @Thierry's answer (i.e., use an output property), but I suggest using the built-in ngModelChange event, rather than having two event bindings. I.e., having [(ngModel)] and (change) results in two event bindings, hence two event handlers run for each click. The built-in ngModelChange event is also a bit nicer/cleaner because $event is already mapped to the value of the checkbox, rather than the DOM click event. So, here are the suggested changes to @Thierry's answer:

<input type="checkbox" name="example" 
  [ngModel]="inputValue" (ngModelChange)="onChange($event)">


onChange(newValue) {
  this.inputValue = newValue;
  console.log(newValue);
  this.inputValueChange.emit(newValue);
}

Plunker

edited Feb 23, 2016 at 16:59

answered Feb 23, 2016 at 16:53

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Collectives™ on Stack Overflow

Angular 2 Component with ngModel not updating parent model

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related