swap values of two ngx-select

[manartaha]

I've used the component(ngx-select) twice, one for the departure station and the other one for the arrival station. Each one of the components contains the same list of data contained in the other one except the element selected by the user.( Example : if the initial list contains ['1','2','3'] and the user chooses '2' from the departure component, than it doesn't exist in the other component and vice versa). The issue is so simple and complicated at the same time. I've a button that swap the two elements chosen(Departure and arrival station) by the user, I swap the values(I check the values in the console) but they ain't displayed in the component(once I swap, the inputs becomes empty).

<form action="#0">
  <div class="form-group col-md-4 col-sm-4">
   <label for="gare-depart">Gare de départ</label>
    <ngx-select [formControl]="ngxControl" name="ngxControl" [allowClear]="true [items]="liste_gares_depart_string" placeholder="Gare de départ"     (select)="doSelectDepart($event)"  (remove)="doRemoveDepart($event)"></ngx-select>
  </div>
  <div class="form-group swapButton col-md-2">
   <button class="btn btn-default" (click)="swapInputs()">
  </div>
  <div class="form-group col-md-4 col-sm-4">
   <label for="gare-arrivee">Gare d'arrivée</label>
    <ngx-select [formControl]="ngxControl2" name="ngxControl2" [allowClear]="true" [items]="liste_gares_arrive_string" placeholder="Gare d'arrivée" (select)="doSelectArrive($event)" (remove)="doRemoveArrive($event)">
    </ngx-select>
  </div>
  </form>

public swapInputs() {
const tmp = this.gare_depart;
this.doSelectDepart(this.gare_arrive);
this.doSelectArrive(tmp);
}

// enlève la gare choisie de la liste des gares d'arrivée
public doSelectDepart = (value: any) => {
this.gare_depart = value;
let data = Object.assign([], this.BackUp_liste_gares_string);
data.splice(data.indexOf(value), 1);
this.liste_gares_arrive_string = data;
}

// enlève la gare choisie de la liste des gares de départ
public doSelectArrive = (value: any) => {
this.gare_arrive = value;
let data = Object.assign([], this.BackUp_liste_gares_string);
data.splice(data.indexOf(value), 1);
this.liste_gares_depart_string = data;
}

Hope i was clear, and thanks in advance.

[optimistex]

@manartaha Hello! Could you reproduce the issue there: https://stackblitz.com/ And I'll try to fix it to show you the working solution. Thanks!

[manartaha]

Hello @optimistex I appreciate your answer, but I just found the solution. I was forgetting to add the value that I wanted to show in the component (I was displaying a value that doesn't exist in my list and this is what I correct in the lines 4 and 5 ). And I used setValue to swap the values. Hope my explanation was clear.

1  const tmp = this.garesForm.controls.ngxControl.value;
2  this.gare_arrive = this.garesForm.controls.ngxControl.value;
3  this.gare_depart = this.garesForm.controls.ngxControl2.value;
4  this.liste_gares_depart_string = Object.assign([], this.BackUp_liste_gares_string);
5  this.liste_gares_arrive_string = Object.assign([], this.BackUp_liste_gares_string);
6  setTimeout(() => {
7   this.garesForm.controls.ngxControl.setValue(this.garesForm.controls.ngxControl2.value);
8   this.garesForm.controls.ngxControl2.setValue(tmp);
9  const liste = Object.assign([], this.liste_gares_depart_string);
10  setTimeout(() => {
11    this.doSelectDepart(this.gare_depart);
12     this.doSelectArrive(this.gare_arrive);
13   }, 50);
14 }, 0);

[optimistex]

@manartaha Since a solution found I close the task.