{"id":18829785,"url":"https://github.com/froiden/angular2-select","last_synced_at":"2025-04-14T03:40:54.016Z","repository":{"id":57241910,"uuid":"68683050","full_name":"Froiden/angular2-select","owner":"Froiden","description":null,"archived":false,"fork":false,"pushed_at":"2016-10-14T11:57:42.000Z","size":53,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-14T01:06:30.042Z","etag":null,"topics":["angular2","multi-select","select2"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Froiden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-20T06:54:23.000Z","updated_at":"2023-06-14T09:13:11.000Z","dependencies_parsed_at":"2022-09-15T08:20:50.662Z","dependency_job_id":null,"html_url":"https://github.com/Froiden/angular2-select","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Froiden%2Fangular2-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Froiden%2Fangular2-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Froiden%2Fangular2-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Froiden%2Fangular2-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Froiden","download_url":"https://codeload.github.com/Froiden/angular2-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248818525,"owners_count":21166438,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular2","multi-select","select2"],"created_at":"2024-11-08T01:46:21.071Z","updated_at":"2025-04-14T03:40:53.989Z","avatar_url":"https://github.com/Froiden.png","language":"TypeScript","readme":"# Angular2 Select component\n## froiden-angular2-select [![npm version](https://badge.fury.io/js/froiden-angular2-select.svg)](http://badge.fury.io/js/froiden-angular2-select) [![npm downloads](https://img.shields.io/npm/dm/froiden-angular2-select.svg)](https://npmjs.org/froiden-angular2-select)\n\n## Getting started\n\n### Install\n\n```\nnpm install --save froiden-angular2-select\n```\n\n## Examples\n\n1. [Without Ajax Single Select](https://plnkr.co/edit/QfGAEyv52byhJIw491YM?p=preview)\n2. [Without Ajax Multi Select](https://plnkr.co/edit/tpPFFf8T1yUrVCCxrXu3?p=preview)\n3. [With Ajax Single Select](https://plnkr.co/edit/iAyag6?p=preview)\n4. [With Ajax Multi Select](https://plnkr.co/edit/Ngqrpwr8rbX5QmZApwYA?p=preview)\n5. [Update with Ajax Multi Select](https://plnkr.co/edit/C78c70Vw7zXwGIMp0i2G?p=preview)\n\n## Add angular2-select.css\nInclude [angular2-select.css](https://github.com/Froiden/angular2-select/blob/master/css/angular2-select.css) in your controller.\nAdd css in your component class\n\n```typescript\n    import { Component} from \"@angular/core\";\n    .......\n\n    @Component({\n        ....\n        ....\n        styleUrls : [\"./angular2-select.css\"]\n    })\n\n```\n\n### Configuration\n\n#### Systemjs\n\nIn `systemjs.config.js` add `froiden-angular2-select` to map and package:\n\n```javascript\nvar map = {\n\t// others...,\n\t'froiden-angular2-select': 'node_modules/froiden-angular2-select'\n};\n\nvar packages = {\n\t// others...,\n\t'froiden-angular2-select': {\n\t\tmain: 'angular2-select.js',\n\t\tdefaultExtension: 'js'\n\t}\n};\n```\n\n### Usage\n\nImport the `SelectModule` and define it as one of the imports of your\napplication module:\n\n```typescript\nimport {NgModule} from '@angular/core';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {FormsModule} from '@angular/forms';\nimport {SelectModule} from 'froiden-angular2-select/angular2-select';\n\nimport {AppComponent} from './app.component';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        FormsModule,\n        SelectModule\n    ],\n    declarations: [\n        AppComponent\n    ],\n    bootstrap: [\n        AppComponent\n    ]\n})\nexport class AppModule { }\n```\n\nAdd the following HTML to the component template in which you want to use the\nselect component:\n\n```html\n\u003cng-select name=\"countries\" [(ngModel)]=\"countries\"\n           [settings]=\"selectOptions\"\u003e\n\u003c/ng-select\u003e\n```\n\nWithin the component class you have to set the countries and dataObject variable. We can set select2 data using ajax or without\najax.\n\n### Without Ajax request\n\n```typescript\n    public countries : any;\n    private selectOptions = {\n        \"idField\" : \"id\",\n        \"textField\" : \"text\",\n        \"multiple\" : true,\n        \"allowClear\" : true,\n        \"debounceTime\" : 300,\n        \"placeholder\" : \"Select countries...\",\n        data :   [\n            {\n                \"id\" : 1,\n                \"text\" : \"India\"\n            },\n            {\n                \"id\" : 2,\n                \"text\" : \"Bangladesh\"\n            },\n            .....\n        ],\n        processResults : (modelObject : any) =\u003e {\n            let selectValues : Array\u003cany\u003e = [];\n            modelObject.forEach((item : {id : number, text : string}) =\u003e {\n                selectValues.push({\n                    id : item.id,\n                    text : item.text,\n                });\n            });\n            return selectValues;\n        }\n    }\n```\n\n### With Ajax request\n\n```typescript\n    public countries : any;\n    private selectOptions = {\n        \"idField\" : \"id\",\n        \"textField\" : \"text\",\n        \"multiple\" : true,\n        \"allowClear\" : true,\n        \"debounceTime\" : 300,\n        \"placeholder\" : \"Select countries...\",\n        ajax : {\n            \"requestType\" : \"get\",\n            \"url\"      : 'http://demo.com/api/countries?fields=id|name\u0026limit=-1\u0026filters={\"name\":{\"type\":\"search\",\"value\":\"SEARCH_VALUE\"}}',\n            \"authToken\": AUTH TOKEN IF REQUIRED,\n            responseData : (response : any) =\u003e {\n                let currentValue = response.data;\n                let value : Array\u003cany\u003e = [];\n                currentValue.forEach((item : {id : number, name : string}) =\u003e {\n                    value.push({\n                        id  : item.id,\n                        text: item.name\n                    });\n                });\n                return value;\n            }\n        },\n        processResults : (modelObject : any) =\u003e {\n            let selectValues : Array\u003cany\u003e = [];\n            modelObject.forEach((item : {id : number, text : string}) =\u003e {\n                selectValues.push({\n                    id : item.id,\n                    text : item.text,\n                });\n            });\n            return selectValues;\n        }\n    }\n```\nNOTE: Always put `SEARCH_VALUE` in your `url`. We will automatically replace `SEARCH_VALUE` with input entered by you.\n\n### For Update (With Ajax request)[View Demo](https://plnkr.co/edit/C78c70Vw7zXwGIMp0i2G?p=preview)\n```typescript\n    public countries : any = [{\n       \"countryCode\" : '1',\n       \"countryName\" : \"India\"\n   }];\n    private selectOptions = {\n        \"idField\" : \"countryCode\",\n        \"textField\" : \"countryName\",\n        \"multiple\" : true,\n        \"allowClear\" : true,\n        \"debounceTime\" : 300,\n        \"placeholder\" : \"Select countries...\",\n        ajax : {\n            \"requestType\" : \"get\",\n            \"url\"      : 'http://demo.com/api/countries?fields=id|name\u0026limit=-1\u0026filters={\"name\":{\"type\":\"search\",\"value\":\"SEARCH_VALUE\"}}',\n            \"authToken\": AUTH TOKEN IF REQUIRED,\n            responseData : (response : any) =\u003e {\n                let currentValue = response.data;\n                let value : Array\u003cany\u003e = [];\n                currentValue.forEach((item : {isoCode : string, name : string}) =\u003e {\n                    value.push({\n                        countryCode  : item.isoCode,\n                        countryName: item.name\n                    });\n                });\n                return value;\n            }\n        },\n        processResults : (modelObject : any) =\u003e {\n            let selectValues : Array\u003cany\u003e = [];\n            modelObject.forEach((item : {countryCode : string, countryName : string}) =\u003e {\n                selectValues.push({\n                    countryCode : item.countryCode,\n                    countryName : item.countryName,\n                });\n            });\n            return selectValues;\n        }\n    }\n```\nNOTE: Always put `SEARCH_VALUE` in your `url`. We will automatically replace `SEARCH_VALUE` with input entered by you.\n\n## [(ngModel)]\nYou need to set `[(ngModel)]` with your Component variable for which you want two way data binding.\n\n## Input properties (selectOptions)\n\n### idField(optional)\n\n*default - id*\n\nString value to set id field.\n\n### textField(optional)\n\n*default - text*\n\nString value to set text field.\n\n### multiple\n\n*true/false*\n\nA boolean to choose between single and multi-select.\n\n### allowClear\n\n*true/false*\n\nIf set to true, a button with a cross that can be used to clear the currently\nselected option is shown if an option is selected.\n\n### debounceTime\n\n*Integer value*\n\nTime for which you want to wait to appear select options.\n\n### placeholder\n\n*default: ''*\n\nThe placeholder value is shown if no option is selected.\n\n### processResults\n\nCallback function to set ngModel array of object.\nFor single select:\n\n```\nprocessResults : (modelObject : any) =\u003e {\n    let selectValues : Array\u003cany\u003e = [];\n    selectValues.push({\n        id : item.id,\n        textValue : item.text,\n    });\n    return selectValues;\n}\n```\n\nFor multiple select :\n\n```\nprocessResults : (modelObject : any) =\u003e {\n    let selectValues : Array\u003cany\u003e = [];\n    modelObject.forEach((item : {id : number, text : string}) =\u003e {\n        selectValues.push({\n            id : item.id,\n            textValue : item.text,\n        });\n    });\n    return selectValues;\n}\n```\n\n## Input properties (selectOptions.ajax)\nIf you want to use ajax request to fetch data from url and want to render this data into your select option then we will use\nfollowing properties:\n\n### requestType\n\n*get/post*\n\nRequest type for url address.\n\n### url\n\n*string*\n\nURL address from where you will fetch data for select options.\nNOTE: Always put `SEARCH_VALUE` in your `url`. We will automatically replace `SEARCH_VALUE` with input entered by you.\n\n### authToken (optional)\n\n*string*\n\nIf your url endpoint uses auth token then assign to authToken\n\n### responseData\n\nCallback function to set select option values:\n\n```\nresponseData : (response : any) =\u003e {\n    let currentValue = response.data;\n    let value : Array\u003cany\u003e = [];\n    currentValue.forEach((item : {id : number, name : string}) =\u003e {\n        value.push({\n            id  : item.id,\n            text: item.name\n        });\n    });\n    return value;\n}\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroiden%2Fangular2-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroiden%2Fangular2-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroiden%2Fangular2-select/lists"}