Issue with Wijmo's valueChanged event + data binding on Angular 2

Question

I have the following code that runs a function whenever the user changes the value of the wj-input-time:

@Component({
    selector: 'my-app',
    template: '<wj-input-time [step]="1" (valueChanged)="test()"></wj-input-time>'
})
export class AppComponent {

  test() {
    console.log('test');
  }

}

The above works fine but when I add data binding to the input the valueChanged event is fired when the app loads and also when the user simply clicks the input which is not the desired outcome:

@Component({
    selector: 'my-app',
    template: '<wj-input-time [(value)]="testDate" [step]="1" (valueChanged)="test()"></wj-input-time>'
})
export class AppComponent {

  testDate: Date = new Date();

  test() {
    console.log('test');
  }

}

I have spent a lot of time reading Wijmo’s documentation but it was not helpful. What am I missing or doing wrong?

I’m using Angular 2 final and Wijmo 5.20162.211 eval

Here’s a Plunker that shows the issue (check the console log): http://plnkr.co/edit/RFo84NEUbypSWwPPu8Go?p=preview

Here's also screenshots:

Answer 1

It's because the date that you've constructed is exact to the second, but the widget is only exact to the minute. Because of this the widget rewrites the variable once it calculates the other values it needs - which is when you click the arrow button.

If you construct a date that is exact only to the given minute, the second log message does not appear anymore.

@Component({
  selector: 'my-app',
  template: '<wj-input-time [(value)]="testDate" [step]="1" (valueChanged)="test()"></wj-input-time>'
})
export class AppComponent {

  testDate: Date;

  constructor() {
    var d = new Date();
    this.testDate = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());
  }

  test() {
    console.log('test');
  }

}

See adjusted plnkr code.