Multiple select ngModel bind values saved based on user selection order

Question

I have the following code to get the list of selected options of a multiple selection component.

<select multiple class="custom-select" [(ngModel)]="selectedOptions">
     <option *ngFor="let option of all_options" [value]="option">                  
         {{option.name}}
     </option>
</select>

The binding to the selectedOptions array is working fine however, does anyone know if it is possible to save the selected objects in the order clicked by the user?

Thank you!

try change event, make a handler function for the change event, and in that method push the changed value into an array if it is not present in the array. — Abhishek Kumar, Jul 17 '18 at 09:46

score 2 · Answer 1 · edited May 10 '21 at 15:53

2

You can use

(ngModelChange)="someFunction(selectedValue)"

for emitting an event when select value changes. Pass selected value to it. Then you can push the value into an array. In this way you will have an array in the clicked order.

edited May 10 '21 at 15:53

Dan Soper

639
8
18

answered Jul 17 '18 at 09:36

Sujay

613
1
5
16

score 1 · Answer 2 · answered Jul 17 '18 at 09:35

1

You may use something like below.

<select (change)="onChange($event.target.value)">

then you can implement onChange method and store responses as required.

onChange(Value) {
    this.valuesArray.push(Value); // or do whatever as required
}

answered Jul 17 '18 at 09:35

Malindu Sandaruwan

1,477
2
13
27

Thanks for the response! However I did think on this option but I was wondering if there was another way to do this that didn't rely on the selection change event. – Raissa Amaral Jul 17 '18 at 14:03

score 0 · Answer 3 · answered Oct 15 '21 at 11:20

You should to use (valueChange): my example is:

<mat-select (valueChange)="functionToChangeValue($event)">
<mat-option *ngFor="let item of items" [value]="item">
{{item.name}}
</mat-option>
</mat-select>

then:

functionToChangeValue(event: any) {
this.data = event;
}

event works with arrays in multiple select.

I hope this help anybody.

Multiple select ngModel bind values saved based on user selection order

3 Answers3