Value changed being fired upon loading of data

[lothern]

Versions: Angular 2: 2.4.1 JQuery: 3.1.1 Select2: 4.0.3 Ng-Select2: 1.0.0-beta.7

Template Code:

<select2 class="form-control"
    [options]="options"
    [data]="data"
    (valueChanged)="valueChanged($event)">
</select2>

or

<select2 class="form-control"
    [options]="options"
    [data]="data$ | async"
    (valueChanged)="valueChanged($event)">
</select2>

Component Code:

ngOnInit() {
  this.data = [{ id: 1, text: 'test'}];
}

or

ngOnInit() {
  this.data$.next([{ id: 1, text: 'test'}]);
}

In both cases valueChanged is fired when the list data is bound to [data]. This is particularly detrimental to my use case in which I'm using the selected value for flow control purposes.

[NejcZdovc]

Thinking behind this flow was, that for example you are displaying data of a select2 in component 2. And when you receive data from a service in component 1, you would also like to update component 2 with the latest data. You would also like to update data when user change something in dropdown. Instead of implementing two things, everything is handled through one flow. If we change this, then you would need add additional function to updated component 2 in ngOnInit.

[jaronwright]

Hey @NejcZdovc so how can I update my data then? Do you have examples of how to do this?

[AlexAlexGoTO]

Same question

[arajput]

I have two select2 components on my form second select2 is dependent on first. when the first select2 is searched and selected, the valueChanged event is triggered twice. which is causing a problem for second select2 control. I think the problem is valueChanged is emitted twice

1. select2 element event bound to value change this.element.on('select2:select select2:unselect', function () { that.valueChanged.emit({ value: that.element.val() }); });
2. ngOnChanges event also emmiting if (changes['data'] && JSON.stringify(changes['data'].previousValue) !== JSON.stringify(changes['data'].currentValue)) { this.initPlugin(); var newValue = this.element.val(); this.valueChanged.emit({ value: newValue }); } if (changes['value'] && changes['value'].previousValue !== changes['value'].currentValue) { var newValue = changes['value'].currentValue; this.setElementValue(newValue); this.valueChanged.emit({ value: newValue }); }

---

1st select2 options is Ajax request <select2 name="client" [data]="clientInitialData" [value]="data.client_id" (valueChanged)="clientChanged($event)" class="form-control" [width]="310" [options]="clientSelect2Options" tabindex="10">

I might be using select2 + angular2 incorrectly

[Satish-Acharya]

Same Issue, while updating the data in child select2 based on parent select2 value. its triggering the valueChanged event of child select2 element. We just need to change the data, don't need to trigger event in child element. Please help to resolve this.

[mactyr]

For my particular use case, the problem isn't so much that valueChanged is emitted, it's that the value is changed to be that of the first item in data, even if the old value still exists in the new data (which it does in my case since I'm only adding to the data, not removing anything).

It seems like an attempt could be made here to preserve the old value if it exists in the new data, and only resort to this.element.val() if the old value can't be found in the new data.

[tyspice]

the problem related to the use case that mactyr is referring to seems to have been resolved in the more actively maintained fork: ng-select2