title: delete selected dropdown value in dynamic row
body: <p>I have parent dropdown with child dropdown value along with add button and delete button. If I have selected any value in dropdown then it should not render in another row dropdown while clicking on add button and when i click on delete button it should delete particular row with adding deleted dropdown value in previous dropdown list.</p>
  
  <p>Adding and deleting value from dropdown/mat select using angular 6</p>
  
  <p><a href="https://i.stack.imgur.com/tGbxa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tGbxa.png" alt="enter image description here"></a></p>
  
  <p>component.html</p>
  
  
        
           Criteria
          
            
              
                
                  {{select.columnName}}
                
              
            
          
          
            
              
                
                  {{where.key}}
                
              
            
          
          
            
            
          
        
  
      
  
  <p>component.ts</p>
  
  <pre><code>constructor(private fb : FormBuilder,private service:ExpoCmsService,private 
  http:HttpClient) {
    this.service.getSearchCmsData().subscribe(data=&gt;{
     this.selects=data;
    })
    this.profileForm = this.fb.group({
      query:new FormControl('',Validators.required),
      optionGroups : this.fb.array([
          this.fb.group({
            selectInput : new FormControl('',Validators.required),
            whereInput : new FormControl('',Validators.required),
  
         }),
      ]),
    });
  
    onSelectSelect(selectInput: string , formIndex : number) : void {
        this.wheres[selectInput] = this.selects.filter((item)=&gt; 
      item.columnName == selectInput);
      }
  
   public addOptionGroup(){
  const fa = this.profileForm.controls["optionGroups"] as FormArray;
  fa.push(this.newOptionGroup());
  
  }
  </code></pre>