how to remove selected option from drop down and show available option in angular

Question

I have a button which adds more select drop downs when clicked. So I would like to remove the already selected options in these select boxes.

Below is my component.html code for selection from drop down

  <div formArrayName="CarInfo">
  <div *ngFor="let itemrow of addAnaGroupForm.get('CarInfo')['controls']; let i = index " 
  [formGroupName]="i">
  <div class="form-group row">

    <label class="col-sm-2 col-form-label">Car Name</label>
    <div class="col-sm-8 txt-box">

    <select (change)="onChangeCar(selectLang.value)" type="number" class="form-control"
     formControlName="CarNum">
        <option hidden value="">Please Select Car</option>
             <ng-container  *ngFor="let anaName of response">
              <option type="number"[ngValue]="anaName.Id">{{ anaName.CarName }}</option>
             </ng-container></select></div></div><hr>
                <div class="col-md-2">
                    <button type="button" *ngIf="addAnaGroupForm.get('CarInfo')['controls']"
                    (click)="deleteRow(i)" class="a-btns btn btn-success tab-btn">
                    <i class="fa fa-trash" aria-hidden="true">Delete</i>
                  </button> </div></div>
        </div>

Here is my component.ts code

   import { HttpClient } from "@angular/common/http";
   import { Component, ViewChildren } from "@angular/core";
   import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";

  @Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
  })
 export class AppComponent {
  name = "Angular";
  addAnaGroupForm: FormGroup;

 serverId: any;
 @ViewChildren("selectLang") langSelects;
 response ={
"status": "success",
"code": 200,
"payload": [
    {
        "Id": 21,
        "CarTypeId": 2,
        "CarName": "car1"
       
     
    },
    {
        "Id": 22,
        "CarTypeId": 3,
        "CarName": "car2"
       
     
    },
   
  {
        "Id": 23,
        "CarTypeId": 4,
        "CarName": "car3"
       
     
    },
    {
        "Id": 24,
        "CarTypeId": 5,
        "CarName": "car4"
       
     
    }
    
 
  ],
  "error": [],
  "message": "Car List"
 }
 list: any;
 constructor(private fb: FormBuilder, private http: HttpClient) {}

 ngOnInit() {
 this.addAnaGroupForm = this.fb.group({
  CarInfo: this.fb.array([])
  });
  }

 onChangeCar(value) {
    var str = value;

   this.serverId = str.substr(3);
   console.log(this.serverId);

   }

  aType() {

    this.list = this.response.payload;
    console.log(this.response);
  
   }

  get formArr() {
    return this.addAnaGroupForm.get("CarInfo") as FormArray;
   }

  initItemRows() {
  return this.fb.group({
  CarNum: [""]
  });
  }

  addNewRow() {
    this.formArr.push(this.initItemRows());
    this.aType();
  }

  deleteRow(index: number) {
   console.log("nm" + index);
   this.formArr.removeAt(index);

  }

}

This is my stackblitz demo https://stackblitz.com/edit/angular-wppi9b?file=src%2Fapp%2Fapp.component.html

Answer 1

When I understand you correct, you want to add each car from the response once to your displayed list?

So you need to remove the selected car item from your list property inside the onChangeCar(value)-method when it was selected.

Remove from array explained here

Answer 2

First, you need to relate this.response.payload with your this.formArr. Then, you will splice the selected car from the other objects of this.formArr array.

onChangeCar(value) {
  var str = value;

  this.serverId = str.substr(3);

  var index = this.response.payload.findIndex(x => x.Id == this.serverId);

  this.response.payload.splice(index, 1);
}