4. Sample Codes

Code for your html file

Add the following HTML to the component template in which you want to use the select component:

<ng-select name="countries" [(ngModel)]="countries"
           [settings]="selectOptions">
</ng-select>

Code for your Component file

Within the component class you have to set the countries and dataObject variable. We can set select2 data using ajax or without ajax.

Without Ajax request

    public countries : any;
    private selectOptions = {
        "idField" : "id",
        "textField" : "text",
        "multiple" : true,
        "allowClear" : true,
        "debounceTime" : 300,
        "placeholder" : "Select countries...",
        data :   [
            {
                "id" : 1,
                "text" : "India"
            },
            {
                "id" : 2,
                "text" : "Bangladesh"
            },
            .....
        ],
        processResults : (modelObject : any) => {
            let selectValues : Array<any> = [];
            modelObject.forEach((item : {id : number, text : string}) => {
                selectValues.push({
                    id : item.id,
                    text : item.text,
                });
            });
            return selectValues;
        }
    }

With Ajax request

    public countries : any;
    private selectOptions = {
        "idField" : "id",
        "textField" : "text",
        "multiple" : true,
        "allowClear" : true,
        "debounceTime" : 300,
        "placeholder" : "Select countries...",
        ajax : {
            "requestType" : "get",
            "url"      : 'http://demo.com/api/countries?fields=id|name&limit=-1&filters={"name":{"type":"search","value":"SEARCH_VALUE"}}',
            "authToken": AUTH TOKEN IF REQUIRED,
            responseData : (response : any) => {
                let currentValue = response.data;
                let value : Array<any> = [];
                currentValue.forEach((item : {id : number, name : string}) => {
                    value.push({
                        id  : item.id,
                        text: item.name
                    });
                });
                return value;
            }
        },
        processResults : (modelObject : any) => {
            let selectValues : Array<any> = [];
            modelObject.forEach((item : {id : number, text : string}) => {
                selectValues.push({
                    id : item.id,
                    text : item.text,
                });
            });
            return selectValues;
        }
    }

NOTE: Always put SEARCH_VALUE in your url. We will automatically replace SEARCH_VALUE with input entered by you.

For Update (With Ajax request)View Demo

    public countries : any = [{
       "countryCode" : '1',
       "countryName" : "India"
   }];
    private selectOptions = {
        "idField" : "countryCode",
        "textField" : "countryName",
        "multiple" : true,
        "allowClear" : true,
        "debounceTime" : 300,
        "placeholder" : "Select countries...",
        ajax : {
            "requestType" : "get",
            "url"      : 'http://demo.com/api/countries?fields=id|name&limit=-1&filters={"name":{"type":"search","value":"SEARCH_VALUE"}}',
            "authToken": AUTH TOKEN IF REQUIRED,
            responseData : (response : any) => {
                let currentValue = response.data;
                let value : Array<any> = [];
                currentValue.forEach((item : {isoCode: string, name: string}) => {
                    value.push({
                        countryCode  : item.isoCode,
                        countryName: item.name
                    });
                });
                return value;
            }
        },
        processResults : (modelObject : any) => {
            let selectValues : Array<any> = [];
            modelObject.forEach((item : {countryCode : string, countryName : string}) => {
                selectValues.push({
                    countryCode : item.countryCode,
                    countryName : item.countryName,
                });
            });
            return selectValues;
        }
    }

NOTE: Always put SEARCH_VALUE in your url. We will automatically replace SEARCH_VALUE with input entered by you.