Angular 2 Component - modelbinding is not working

Question

I'm trying to build a wrapper for pickatime (pickadate) in angular 2 but the modeldata is not changing when I select a time.

My wrapper-component looks like this:

import {Component, AfterContentInit, Input, EventEmitter, ElementRef} from 'angular2/core';

@Component({
    selector: 'mundo-timepicker',
    template: `
        <input class="form-control" (click)="onClick()" [(value)]="zeit"  />
    `
})
export class MundoTimepickerComponent implements AfterContentInit {
    @Input() zeit: any;

    pickerConfig: Pickadate.TimeOptions = {
        format: 'HH:i',
        // editable: true,
        interval: 30,

    }
    picker: any;
    constructor(private el: ElementRef) {
    }

    ngAfterContentInit() {
        this.picker = jQuery(this.el.nativeElement.children[0]).pickatime(this.pickerConfig);        
    }
    onClick() {
        var picker = this.picker.pickatime('picker');
        var self = this;
        picker.open().on({
            set: function (thingSet) {
                self.zeit = this.get();
            }
        });
    }
}

I am using this component in a template like this:

<mundo-timepicker [(zeit)]="myzeit"></mundo-timepicker>

The click works fine, the picker opens and I can see my selected value in the input. When I hit a save button to read the given model property "myzeit", I get the old value.

I'm not sure if this is even the right way to build a wrapper for a plugin. Is it?

Thx!

Update I've tried to build a simpler component without any plugin like pickadate, and it is also not working :/

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'mundo-input',
    template: `
        <input class="form-control"  [(ngModel)]="zeit"  />
    `
})
export class MundoInputComponent  {
    @Input() zeit: string;    
}

Again I am consuming this component like this:

<mundo-input [(zeit)]="myzeit"></mundo-input>

The myzeit-property from the outer component gets injected correctly. When I change the value by hand and press save on the outside component, the myzeit-property has the old value.

Pankaj Parkar · Accepted Answer · 2016-03-30T22:13:53.870

1

You should use [(ngModel)] with input box to have two way binding enabled over that input.

 <input class="form-control" (click)="onClick()" [(value)]="zeit"  />

Should be

 <input class="form-control" (click)="onClick()" [(ngModel)]="zeit"  />

edited Mar 30 '16 at 22:13

answered Mar 30 '16 at 22:09

Pankaj Parkar

134,766
23
234
299

yeah, I've tried it, but that's not working, maybe it's something with the pickatime plugin? – Weissvonnix Mar 30 '16 at 22:12

score 1 · Answer 2 · answered Mar 31 '16 at 15:50

That's probably not the cause of your issue but use () => { } instead of function () {}, then you don't need var self = this, just use this.xxx

setTimeout() should fix your issue though:

onClick() {
    var picker = this.picker.pickatime('picker');
    picker.open().on({
        set: (thingSet) => {
            setTimeout(() => {
              self.zeit = this.get();
            });
        }
    });
}

Angular 2 Component - modelbinding is not working

2 Answers2

Linked