{"id":19315392,"url":"https://github.com/thatisuday/ngx-choices","last_synced_at":"2025-07-10T08:43:59.714Z","repository":{"id":65458882,"uuid":"116158408","full_name":"thatisuday/ngx-choices","owner":"thatisuday","description":"Angular 4+ typehead to search and select multiple tags","archived":false,"fork":false,"pushed_at":"2018-03-21T16:39:07.000Z","size":604,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-24T04:30:38.677Z","etag":null,"topics":["choices","multiple-select-list","select2","tags","typehead","typescript"],"latest_commit_sha":null,"homepage":"http://thatisuday.github.io/ngx-choices","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thatisuday.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-03T16:28:51.000Z","updated_at":"2022-01-14T23:52:57.000Z","dependencies_parsed_at":"2023-01-24T14:15:50.488Z","dependency_job_id":null,"html_url":"https://github.com/thatisuday/ngx-choices","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thatisuday/ngx-choices","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fngx-choices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fngx-choices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fngx-choices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fngx-choices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thatisuday","download_url":"https://codeload.github.com/thatisuday/ngx-choices/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fngx-choices/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264552345,"owners_count":23626699,"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":["choices","multiple-select-list","select2","tags","typehead","typescript"],"created_at":"2024-11-10T01:06:43.734Z","updated_at":"2025-07-10T08:43:59.675Z","avatar_url":"https://github.com/thatisuday.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-choices\nAngular 4+ typehead to search and select multiple tags.\n\n[![preview](https://i.imgur.com/LIvj1hY.png)](https://thatisuday.github.io)\n\n[![npm](https://img.shields.io/npm/dt/ngx-choices.svg?style=flat-square)](https://www.npmjs.com/package/ngx-choices)\n[![npm](https://img.shields.io/npm/v/ngx-choices.svg?style=flat-square)](https://www.npmjs.com/package/ngx-choices)\n[![David](https://img.shields.io/david/thatisuday/ngx-choices.svg?style=flat-square)](https://www.npmjs.com/package/ngx-choices)\n[![preview](https://img.shields.io/badge/preview-click_here-green.svg?style=flat-square)](https://thatisuday.github.io/ngx-choices)\n\n\n# Peer dependencies\n- \"@angular/core\": \"\u003e4.3.0\",\n- \"@angular/forms\": \"\u003e4.3.0\",\n- \"@angular/common\": \"\u003e4.3.0\",\n\n\n# Installation\n\n```bash\nnpm i -S ngx-choices@latest\n```\n\n\n# Import module\n```ts\nimport { NgxChoicesModule } from 'ngx-choices';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    FormsModule,\n    ReactiveFormsModule,\n    HttpClientModule,\n    NgxChoicesModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\n```\n\n\n# Use cases\n## Inside form as form control\n```html\n\u003cdiv class=\"container\"\u003e\n\t\u003cform #f=\"ngForm\" (ngSubmit)=\"submit(f)\"\u003e\n\t\t\u003cdiv class=\"form-group\"\u003e\n\t\t\t\u003clabel\u003eEnter email address(es)\u003c/label\u003e\n\t\t\t\u003cngx-choices name=\"choices\" [items]=\"items\" [config]=\"config\" [(ngModel)]=\"choices\" required multiple\u003e\u003c/ngx-choices\u003e\n\t\t\u003c/div\u003e      \n\n\t\t\u003cbutton type=\"submit\" [disabled]=\"!f.valid\"\u003eSubmit\u003c/button\u003e\n\t\u003c/form\u003e\n\u003c/div\u003e\n```\n\n## Independent component\n```html\n\u003cngx-choices name=\"choices\" [items]=\"items\" [config]=\"config\" (onChange)=\"changed($event)\" (onType)=\"typed($event)\" (onError)=\"erred($event)\" multiple\u003e\u003c/ngx-choices\u003e\n```\n\n\n# Nomenclature\n### items (binding)\nDropdown items to choose **choice** from.\n\n### config (binding)\n`ngx-choices` configuration object of type `NGX_CHOICES_CONF`.\n\n### onChange (event)\nWhen user adds or removes choices. Emits changed values.\n\n### onType (event)\nWhen user types inside input box to search from items or to add custom value.   Emits typed value.\n\n### onError (event)\nSends alert notification occured during user interactions.\n\n### multiple (attr)\nUser will be able to select multiple choices.\n\n### disabled (attr)\nTo disable user interaction, just like when button or form control is disabled.\n\n\n# interface\n```ts\ninterface NGX_CHOICES_CONF {\n    // [import enum `NGX_CHOICES_MODE` from ngx-choices]\n    // mode to run ngx-choices in (default NGX_CHOICES_MODE.NORMAL) \n    // NGX_CHOICES_MODE.NORMAL mode -\u003e select plain text for values\n    // NGX_CHOICES_MODE.ABSTRACT mode -\u003e select objects for values, will not accept for custom user input\n    mode?: NGX_CHOICES_MODE;\n\n    // key in items provided from which value will be selected (default id)\n    // critical for validation and validating duplicate\n    // no need in case of `filter` is false\n    value?: string;\n\n    // key in `items` provided or filtered results to display as selected choices (default null)\n    label?: string;\n\n    // extra field to be disabled in filtered results (default username)\n    meta?: string;\n\n    // image field to pick avatar image (default null)\n    avatar?: string;\n\n    // alternative avatar image url if avatar image is not found in the item (default null)\n    avatar_url?: string;\n\n    // allow only unique value (default true)\n    unique?: boolean;\n\n    // should ngx-choices filter items (default false)\n    // items must be provided in order to filter choices\n    filter?: boolean;\n\n    // should ngx-choices filter remote items (default null)\n    // if provided, this will not use items provided ngx-choices using `items` binding\n    remoteFilter?: {\n        // api url endpoint to fetch data\n        // by default, `q` query parameter used to send user type query value\n        url: string;\n        \n        // additional query parameters to be sent\n        queryParams?: HttpParams;\n\n        // addtional headers to be sent\n        headers?: HttpHeaders;\n\n        // search query parameter (default q)\n        searchParam?: string;\n    };\n\n    // placeholder text of user input box (default 'Type to enter value')\n    placeholder?: string;\n\n    // [import RegExp preset `REGEX_TYPES` from ngx-choices]\n    // regular expression to match choice value (default REGEX_TYPES.ALL)\n    pattern?: RegExp;\n\n    // minimum length of user input value (default 1)\n    minLength?: number;\n\n    // maximum length of user input value (default 100)\n    maxLength?: number;\n\n    // maximum number of values user can choose (default 100)\n    maxSelections?: number;\n\n    // hide input on maximum selections (default false)\n    hideInputOnMaxSelections?: boolean;\n\n    // accept user input value (default true)\n    // will not work in case of abstract `mode`\n    acceptUserInput?: boolean;\n    \n    // css styles\n    style?: {\n        // min-width of input box\n        minInputWidth?: string;\n\n        // selected value element properties\n        choiceElementHeight?: string;\n        choiceBorderRadius?: string;\n    }\n}\n\ninterface NGX_CHOICES_ERROR {\n    type: string;\n    msg: string;\n}\n```\n\n\n# enum\n```ts\nenum NGX_CHOICES_MODE {\n    NORMAL,\n    ABSTRACT\n}\n```\n\n\n# constant\n```ts\nconst REGEX_TYPES = {\n    ALL: /.+/,\n    EMAIL: /^(([^\u003c\u003e()\\[\\]\\\\.,;:\\s@\"]+(\\.[^\u003c\u003e()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/,\n    LETTERS_ONLY: /^[a-zA-Z]+$/,\n    INT_ONLY: /^\\d+$/,\n    FLOAT_ONLY: /^-?\\d*(\\.\\d+)?$/\n};\n\nconst KEY_CODES = {\n    backspace: 8,\n    enter: 13,\n    up: 38,\n    down: 40\n};\n\nconst DEFAULT_CONF: NGX_CHOICES_CONF = {\n    mode: NGX_CHOICES_MODE.NORMAL,\n    value: 'id',\n    label: 'name',\n    meta: null,\n    avatar: null,\n    avatar_url: null,\n    unique: true,\n    filter: false,\n    remoteFilter: null,\n    placeholder: 'Type to enter value',\n    pattern: REGEX_TYPES.ALL,\n    minLength: 1,\n    maxLength: 100,\n    maxSelections: 100,\n    hideInputOnMaxSelections: false,\n    acceptUserInput: true,\n    style: {\n      minInputWidth: '150px',\n      choiceElementHeight: '22px',\n      choiceBorderRadius: '12px',\n    }\n};\n```\n\n\n# Copyrights\nIntegrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell \"as-is\". We would appreciate if you contact us at `thatisuday@gmail.com` (if you are a business, institution or organization) so that we can mention your name in **users list** on this page.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthatisuday%2Fngx-choices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthatisuday%2Fngx-choices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthatisuday%2Fngx-choices/lists"}