How to remove the previously selected option from a drop-down menu in a table?

Question

I am making a project on angular 7.It has a table with a column having dropdowns. The dropdown contains various languages. When a language is selected in a particular row, t

Answer 1

You can store the langs in an array make a function like

  lang = []; //define the array
  getLang(i, languageList) {
    return i == 0 ? languageList :
      this.getLang(i - 1, languageList.filter(x => x.name != this.lang[i-1]))
  }

So, you can has some like

    
      Select Language
      {{lang.name}}
    

But I don't like because each change force Angular to calculate all the options. So we are going to improve the code using FormArray and an array langList, and make sure that we can not choose the same language

First our variable and our function changed

  langList=[];
  getLangForFormArray(i, languageList) {
    return i == 0 ? languageList :
      this.getLang(i - 1, this.langList[i-1].filter(x => x.name != this.formArray.value[i-1]))
  }

We create a formArray

  formArray=new FormArray(this.languageList.map(()=>new FormControl(null)))

And in ngOnInit

  ngOnInit()
  {
    this.formArray.valueChanges.pipe(startWith(null)).subscribe(()=>{
      //create the langList array
      for (let i=0;i{
         if (this.formArray.value.findIndex(v=>v==x)!=index)
             this.formArray.at(index).setValue(null,{emitEvent:false})
         })
      }
    })
  }

See that use formArray valueChanges with pipe(startWith(null)) to create at first the langList

The .html

    
      Select Language
      {{lang.name}}
    

And the demo in stackblitz