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:

<my-date-range-picker name"xyz" [(NgModel)]="aDateRangeValue"></my-date-range-picker>

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?

Can you provide us with some code or better explanation because I'm not sure what you want to accomplish here. — anteAdamovic
– anteAdamovic, Commented Aug 3, 2017 at 14:28
I tried to better describe my scenario. Basically I have two values, and I want to expose both as output via NgModel, or something alternative — Alberto Chiesa
– Alberto Chiesa, Commented Aug 3, 2017 at 14:37
Does my answer help with your issue ? You can make them both EventEmitters yes or even Subjects (from rxjs) depending on your needs. — anteAdamovic
– anteAdamovic, Commented Aug 3, 2017 at 14:45
Post a plunker of what you've got so far. I'll be easier to work on then... — JGFMK
– JGFMK, Commented Aug 3, 2017 at 14:47
@JGFMK I have other 5 controls binding to simple values, exposing values to the forms module, through ControlValueAccessor interface. ControlValueAccessor gives a lot of benefits, but seems limited to exposing single value. Now I'm wondering how could I do the same (implementing a ControlValueAccessor) with 2 values (or, in other words, a single value defined by two dates). — Alberto Chiesa
– Alberto Chiesa, Commented Aug 3, 2017 at 14:50

alcfeoh · Accepted Answer · 2017-08-09 23:06:47Z

2

If you want to create you own ngModel like two-way data-binding, that's what you should do:

@Component()
export class MyComponent {

      myValue = 0;

      @Output()
      myValueChange = new EventEmitter();

      @Input()
      get myValue() {
             return this.myValue;
      }

      set myValue(val) {
           this.myValue= val;
           this.myValueChange.emit(this.myValue);
      }
}

Now you can use it as follows and have two-way data binding in effect:

<my-component [(myValue)]="someExpression"></my-component>

Adding a link to a simple tutorial on this as well: http://www.angulartraining.com/blog/tutorial-create-your-own-two-way-data-binding-in-angular/

edited Aug 9, 2017 at 23:06

answered Aug 4, 2017 at 23:29

alcfeoh

2,2871 gold badge20 silver badges35 bronze badges

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

Comments

anteAdamovic · Accepted Answer · 2017-08-03 14:47:52Z

1

You can use two Output directives.

<my-date-range-picker name"xyz" [dateTo]="dateTo" [dateFrom]="dateFrom"></my-date-range-picker>

While in your component you would have

import { Output } from '@angular/core';
.
.
@Output() dateTo: any; // EventEmitter, Subject, Number, String, doesn't matter ...
@Output() dateFrom: any;

Here's a reference to component interaction using Input and Output

Component Interaction

edited Aug 3, 2017 at 14:47

answered Aug 3, 2017 at 14:45

anteAdamovic

1,44312 silver badges25 bronze badges

2 Comments

Alberto Chiesa Over a year ago

Yes, but could I attach validation and form binding to simple Output directives? I'm trying to understand what limits are there in the possible approaches.

anteAdamovic Over a year ago

If you use them as EventEmitters or Subjects you can subscribe to them and use validation on those events

Alberto Chiesa · Accepted Answer · 2018-02-14 09:40:57Z

Well, as it turns out, you can have models of any kind.

So, I used the base classes from this article, here is the most relevant:

export class ValueAccessorBase<T> implements ControlValueAccessor {  
  private innerValue: T;


  private changed = new Array<(value: T) => void>();
  private touched = new Array<() => void>();


  get value(): T {
    return this.innerValue;
  }


  set value(value: T) {
    if (this.innerValue !== value) {
      this.innerValue = value;
      this.changed.forEach(f => f(value));
    }
  }


  touch() {
    this.touched.forEach(f => f());
  }


  writeValue(value: T) {
    this.innerValue = value;
  }


  registerOnChange(fn: (value: T) => void) {
    this.changed.push(fn);
  }


  registerOnTouched(fn: () => void) {
    this.touched.push(fn);
  }
}

This happens to work even when T is a class, with from and to properties, in my case:

@Component(
  ...
)
class DateRangeComponent extends ValueAccessorBase<DateRange> {
  ... implementation

  // somewhere after the view init:
  jqueryComponent.on('change', (eventData) => {
   // here I have eventData.from and eventData.to as Date values
   this.value = {
     from: eventData.from,
     to: eventData.to
   };
  });
}

So, if everyone else stumbles upon this question, the answer is: go ahead and write your own component.

As a side note, this works best when using forms only to prepare Json objects to be sent in Ajax calls. An old fashioned form-encoded submit would be less linear.

Collectives™ on Stack Overflow

Angular 2 - Binding Component to multiple values

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related