title: Angular ng-select virtual scroll functionality
body: <p>My page consists of several <a href="https://ng-select.github.io/ng-select#/search" rel="nofollow noreferrer">ng-select</a> (Custom server-side search) dropdowns created by a *ngFor directive, having the possibility to pick multiple items from each dropdown.</p>
  
  <p>I also want to include the <a href="https://ng-select.github.io/ng-select#/virtual-scroll" rel="nofollow noreferrer">virtual scroll</a> functionality but I don't know how to make another server request and update the <code>filterValues$</code> value to contain new data.</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;ng-select [items]="filterValues$[filter.name] | async"
           [typeahead]="filterValuesInput$[filter.name]"
           [virtualScroll]="true"
           [multiple]="true"
           [closeOnSelect]="false"
           [loading]="filterValuesLoading[filter.name]"
           [(ngModel)]="filter.filter_values"
           (scrollToEnd)="onScrollToEnd(filter.name)"
           (open)="onFilterOpen(filter.name)"
           typeToSearchText="No values found"
           bindLabel="name"&gt;
  &lt;/ng-select&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>onScrollToEnd(filterName) {
      this.fetchMore(filterName);
  }
  
  fetchMore(filterName) {
      this.filterValues$[filterName] = combineLatest(this.getFilterValues(filterName, this.afterKey), of(this.existingValues))
        .pipe(
          map(combined =&gt; {
            return combined[1].concat(combined[0])
          })
      );
  }
  
  getFilterValues(filterName, after) {
      return this.filterValuesInput$[filterName].pipe(
        tap(() =&gt; this.filterValuesLoading[filterName] = true),
        startWith(''),
        distinctUntilChanged(),
        switchMap(term  =&gt; this.search.getFilterValues(filterName, '' + term, '' + after).pipe(
          tap(res =&gt; {
            this.afterKey = res.after_key;
            this.filterValuesLoading[filterName] = false;
            this.existingValues = this.existingValues.concat(res.filter_values);
            this.totalFilterValues = res.total_hits;
            //this.bufferLength += this.initialValues.length;
          }),
          map(res =&gt; res.filter_values),
          catchError(() =&gt; of([])) // empty list on error
        ))
      )
  }
  </code></pre>
  
  <p>Any help would be appreciated!</p>
  
  <p>EDIT with updated code: I managed to implement the virtual scroll functionality but whenever I go to the bottom of the dropdown, it triggers the <code>fetchMore()</code> method and resets <code>this.filterValues$[filterName]</code> value, moving the dropdown from bottom to top. How can I prevent that?</p>