ng2-select server side

As a result, it was decided:

issue on github

selectSingle.html:

<div style="width: 300px; margin-bottom: 20px;"> <h3>Select a single city</h3> <ng-select [allowClear]="true" [items]="items | async" (data)="refreshValue($event)" (selected)="selected($event)" (removed)="removed($event)" (typed)="typed($event)" placeholder="No city selected"> </ng-select> <pre>{{value.text}}</pre> </div> 

selectSingle.component.ts:

 import {Component} from '@angular/core'; import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, AsyncPipe} from '@angular/common'; import {SELECT_DIRECTIVES} from "../../ng2-select/components/select"; import {Observable} from "rxjs/Rx"; import {SelectSingleService} from "./selectSingle.service"; @Component({ selector: 'select-single', pipes: [AsyncPipe], template: require('./selectSingle.html'), directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES ], providers: [SelectSingleService] }) export class SelectSingleComponent { constructor(private _DataService: SelectSingleService) { } ngOnInit() { this.items = this._DataService.getFiltered(''); } public items:Observable<Array<any>>; private value:any = {}; public selected(value:any):void { console.log('Selected value is: ', value); } public removed(value:any):void { console.log('Removed value is: ', value); } public typed(value:any):void { this.items = this._DataService.getFiltered(value); } public refreshValue(value:any):void { this.value = value; } } 

selectSingle.service.ts:

 /** * Created by bmsdave on 07.06.16. */ import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import {Observable} from 'rxjs/Rx'; import 'rxjs/add/operator/catch' @Injectable() export class SelectSingleService { private urlData = '/assets/json/country.json'; constructor(private http:Http) { } getData():Observable<Array<any>> { return this.http.get(this.urlData) .map(this.extractData) .catch(this.handleError); } getFiltered(filter: string):Observable<Array<any>> { return this.http.get(this.urlData) .map( (res) => {return this.extractFilteredData(res, filter)} ) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body || []; } private extractFilteredData(res: Response, filter: string) { let body = res.json().filter((item: any) => { return item.text.toLowerCase().indexOf(filter) != -1}); return body || []; } private handleError (error: any) { // In a real world app, we might use a remote logging infrastructure // We'd also dig deeper into the error to get a better message let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error'; console.error(errMsg); // log to console instead return Observable.throw(errMsg); } } 

coutnry.json:

 [ {"text": "South Africa", "id": 1}, {"text": "Palau", "id": 2}, {"text": "Greenland", "id": 3}, {"text": "Cote d'Ivoire", "id": 4} ]