title: How to bind ng-select with different items depends upon filter
body: <p>I am using following code to bind ng-select present in formgroup.</p>
  <p><strong>html:</strong></p>
  <pre><code>&lt;p&gt;Select multiple elements using paste&lt;/p&gt;
   &lt;div class=&quot;col-md-offset-2 col-md-4&quot;&gt;  
               &lt;select style=&quot;widht:300px;&quot; [ngModel]=&quot;selectedSearchFilter&quot; (ngModelChange)=&quot;onChange($event)&quot; name=&quot;sel3&quot;&gt;
                &lt;option [ngValue]=&quot;i&quot; *ngFor=&quot;let i of searchFilters&quot;&gt;{{i.name}}&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;  
  &lt;br&gt;
  
  &lt;form class=&quot;form-horizontal&quot; [formGroup]=&quot;personalForm&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
  &lt;div style=&quot;background-color: gainsboro&quot;&gt;  
     &lt;div formArrayName=&quot;other&quot; *ngFor=&quot;let other of personalForm.get('other').controls; let i = index&quot; class=&quot;form-group&quot;&gt;  
          &lt;div [formGroupName]=&quot;i&quot;&gt;  
                &lt;div class=&quot;form-group&quot; class=&quot;row cols-md-12&quot;&gt;  
                  &lt;ng-select #ngSelect formControlName=&quot;searchCreteria&quot;
                      [items]=&quot;people&quot;
                      [multiple]=&quot;true&quot;
                      bindLabel=&quot;name&quot;
                      [closeOnSelect]=&quot;false&quot;
                      [clearSearchOnAdd]=&quot;true&quot;
                       bindValue=&quot;id&quot;
                      (paste)=&quot;onPaste($event,i)&quot;
                      (clear)=&quot;resetSearchCreteria(item)&quot;
                      [selectOnTab]=&quot;true&quot;
                      [closeOnSelect]=&quot;true&quot;&gt;
                      &lt;ng-template ng-option-tmp let-item=&quot;item&quot; let-item$=&quot;item$&quot; let-index=&quot;index&quot;&gt;
                          &lt;input id=&quot;item-{{index}}&quot; type=&quot;checkbox&quot;/&gt; {{item.name | uppercase}}
                      &lt;/ng-template&gt;
                  &lt;/ng-select&gt;
                &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;  
  &lt;/div&gt;  
  &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot;
         (click)=&quot;onClearDataClick()&quot;&gt;Clear Data&lt;/button&gt;
    &lt;/form&gt;
    {{selectedSearchFilter | json}}
  </code></pre>
  <p>.ts:</p>
  <pre><code>import { Component, OnInit,ViewChildren,ElementRef } from '@angular/core';
  import { DataService, Person } from '../data.service';
  import { map } from 'rxjs/operators';
  import { FormGroup, FormArray , FormControl, FormBuilder,Validators } from '@angular/forms';
  
  @Component({
  selector: 'multi-checkbox-example',
  templateUrl: './multi-checkbox-example.component.html',
  
  })
  export class MultiCheckboxExampleComponent implements OnInit {
  
  people: Person[] = [];
  selectedPeople = [];
  
  ngSelectCount=[];
  personalForm:FormGroup;
  
  searchFilters = [
     { name: &quot;--Please Select Item&quot;, id: -1 },
  { name: &quot;Country&quot;, id: 1 },
  { name: &quot;States&quot;, id: 2 },
  { name: &quot;Cities&quot;, id: 3 }];
  selectedSearchFilter = this.searchFilters[0];
  constructor(private dataService: DataService,private formBuilder: FormBuilder) {
  
  }
  
   ngOnInit() {
    this.personalForm = this.formBuilder.group({
        filter: new FormControl(null),
        other: this.formBuilder.array([])  
      });
   }
  
    addOtherSkillFormGroup(filterName:string): FormGroup { 
  
        this.dataService.getRecords(filterName)
          //.pipe(map(x =&gt; x.filter(y =&gt; !y.disabled)))
          .subscribe((res) =&gt; {
              this.people = res;
              
              //this.selectedPeople = [this.people[0].id, this.people[1].id];
          });
  
     return this.formBuilder.group({  
      searchCreteria: [''] 
     });  
    }  
  
    onPaste(event: ClipboardEvent,i:any) {
    let clipboardData = event.clipboardData;
    let pastedData = clipboardData.getData('text');
      // split using spaces
      //var queries = pastedData.split(/\s/);
      var queries = pastedData.split(/\r\n|\r|\n/);
      //console.log(queries);
      // iterate over each part and add to the selectedItems
      queries.forEach(q =&gt; {
       var cnt = this.people.find(i =&gt; i.name.toLowerCase() === q.toLowerCase());
        console.log(cnt);
       if(cnt != undefined)
       {
          const control = &lt;FormArray&gt;this.personalForm.controls.other;
          const controlData = control.get([i]);
          controlData.get('isPointChecked').setValue(true);
          this.people[i]['isPointChecked'] = true;
      }});
     }
     onClearDataClick() {
      this.personalForm.reset();
    }
   onChange(e)
   {
    if(e.id != -1)
    {
     var cnt = this.ngSelectCount.find(i =&gt; i === e.id);
       if(cnt == undefined)
       {
         console.log(e.id);
        (&lt;FormArray&gt;this.personalForm.get('other')).push(this.addOtherSkillFormGroup(e.name));  
          this.ngSelectCount.push(e.id);
          this.selectedSearchFilter = e;
       }
    }
    else
    {
      this.personalForm.reset();
      this.ngSelectCount.length = 0;
     }
  }
  
  resetSearchCreteria(e)
  {
    const index: number = this.ngSelectCount.indexOf(e);
    if (index !== -1) {
      this.ngSelectCount.splice(index, 1);
    } 
  }
  /////////////////////////////
  
  }
  </code></pre>
  <p><strong>data.service.ts:</strong></p>
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';
  import { delay, map } from 'rxjs/operators';
  import { HttpClient } from '@angular/common/http';
  
  export interface Person {
  id: any;
  name: string;
  }
  
  @Injectable({
  providedIn: 'root'
  })
  export class DataService {
  constructor(private http: HttpClient) { }
  getRecords(term: string = null): Observable&lt;Person[]&gt; {
      let items = this.getData(term);
      return of(items).pipe(delay(200));
  }
  
  getData(filterType: string) {
  if (filterType == &quot;Country&quot;) {
    return [
      { id: 1, name: &quot;India&quot; },
      { id: 2, name: &quot;Switzerland&quot; },
      { id: 3, name: &quot;Norway&quot; },
      { id: 4, name: &quot;Macao&quot; },
      { id: 5, name: &quot;Qatar&quot; },
      { id: 6, name: &quot;Ireland&quot; },
      { id: 7, name: &quot;United States&quot; },
      { id: 15, name: &quot;United Kingdom&quot; },
      { id: 21, name: &quot;United Arab Emirates&quot; }
    ];
  } else if (filterType == &quot;States&quot;) {
    return [
      { id: 1, name: &quot;State 1&quot; },
      { id: 2, name: &quot;State 2&quot; },
      { id: 3, name: &quot;State 3&quot; },
      { id: 4, name: &quot;State 4&quot; },
      { id: 5, name: &quot;State 5&quot; },
      { id: 6, name: &quot;State 6&quot; },
      { id: 7, name: &quot;State 7&quot; },
      { id: 15, name: &quot;State 8&quot; },
      { id: 21, name: &quot;State 9&quot; }
    ];
  } else {
    return [
      { id: 1, name: &quot;City 1&quot; },
      { id: 2, name: &quot;City 2&quot; },
      { id: 3, name: &quot;City 3&quot; },
      { id: 4, name: &quot;City 4&quot; },
      { id: 5, name: &quot;City 5&quot; },
      { id: 6, name: &quot;City 6&quot; },
      { id: 7, name: &quot;City 7&quot; },
      { id: 15, name: &quot;City 8&quot; },
      { id: 21, name: &quot;City 9&quot; }
    ];
    }
  }
  }
  </code></pre>
  <p>In above code, I am trying to bind different items on basis of dropdown selection. Like if user select Country then countries will be bind with ng-select and if states will select then states will be bind. But in my case last selection is reflecting for all formcontroles.</p>
  <p>Complete working sample you can find <a href="https://stackblitz.com/edit/angular-rmhb9v-kxbizl?file=src%2Fmulti-checkbox-example.component.ts" rel="nofollow noreferrer">here</a></p>
  <p>Could you please help me to configure this case.</p>