title: Ng-select: Remote API call doesn't refresh the view
body: <p>I'm using <code>ng-select</code> component (<a href="https://github.com/valor-software/ng2-select" rel="nofollow noreferrer">https://github.com/valor-software/ng2-select</a>).
  I implemented a way to remotely fetch data when the user types. 
  However, the new data will be fetched and the <strong>(items)</strong> object populated correctly, but the view is not getting refreshed.</p>
  
  <p>Let me provide you some code:</p>
  
  <p>Here's the <strong>template</strong>:</p>
  
  <pre><code>&lt;ng-select
    #select 
    [allowClear]="'true'"
    id="DropdownTypeaheadQuestion-{{ question.id }}"
    [(items)]="items"
    [formControl]="formControlToUse"
    placeholder="{{ placeholderText }}"
    [multiple]="isMultiple"
    (selected)="execSelected($event)"
    (typed)="execKeypress($event)"&gt;
  &lt;/ng-select&gt;
  </code></pre>
  
  <p><strong>Controller</strong>: This method is executed on keypress:</p>
  
  <pre><code>  execKeypress($event) {
      // When remote, clear all items directly on keypress. Else we have an ugly lag because of the debounce time.
      if (this.config.remote === true) {
        this.items = [];
      }
      this.searchSubject.next($event);
    }
  </code></pre>
  
  <p><strong>Controller</strong>: On ngInit I subscribe on that event in order to fetch the new data:</p>
  
  <pre><code>// Inside ngOnInit I subscribe to the observable
  this.searchSubject.debounceTime(500)
                    .takeUntil(this.ngUnsubscribe)
                    .subscribe( (searchTextValue: string) =&gt; {
  
    // save search string on scope
    this.searchTextValue = searchTextValue;
    this.config.httpParams = this.config.httpParams.set('search', searchTextValue);
  
    // only send search if more than x chars (or empty)
    if (searchTextValue === '' || searchTextValue.length &gt;= this.config.minChars) {
      this.fetchResults();
    }
  });
  </code></pre>
  
  <p><strong>Controller</strong>: This is the method to fetch the results:</p>
  
  <pre><code>// fetchResult method fetches the new items and appends them to the items array
  this.httpClient.get(url, {params: this.config.httpParams})
                 .takeUntil(this.ngUnsubscribe)
                 .subscribe( (res: any) =&gt; {
  
                   this.items = this.transformSelectableValuesToConsumables(res);
  
                   this.select.items = this.items;
  
                   this.loadingResults = false;
                 },
                 (error) =&gt; {
                   this.loadingResults = false;
  
                   // TODO: Implement proper error handling
                 });
  </code></pre>
  
  <p>Everything works correctly with the object: items array is populated and filled correctly. However, The dropdown closes and opens only when I focus out and back in. Seems to be a bug in the component. I also raised an issue on their github:</p>
  
  <p><a href="https://github.com/valor-software/ng2-select/issues/929" rel="nofollow noreferrer">https://github.com/valor-software/ng2-select/issues/929</a></p>
  
  <p>Any help is greatly appreciated :)</p>