Angular 2 - Binding Component to multiple values

Question

I'm trying to implement a date range selector in Angular 2.

I already have a working widget, which I have to link to the @angular/forms subsystem.

What I would like is to be able to bind the two output values (let's say rangeStart and rangeEnd) to two distinct properties in the containing form's state.

Is there a way I can configure the NgModel settings to accomplish this?

An alternative could be to bind a single property of type DateRange:

type DateRange = {
    from: Date,
    to: Date
};

buyt I don't know if this is even possible.

Any suggestion on how to accomplish this?

Edit:

What I have is a jQuery-derived, JS component which exposes an onChange, like so:

component.on('change', (eventData) => {
  // here I have eventData.from and eventData.to as Date values
});

I want to integrate this kind of handler in a Angular friendly component. But, I can't simply do this:

Because, AFAICT, change detection is not going to work with composite values. What should I expose in my component? Two EventEmitters? Can I leverage NgModel in some way?

Angular 2 - Binding Component to multiple values

3 Answers