{"id":13580980,"url":"https://github.com/ng-select/ng-select","last_synced_at":"2026-03-01T22:06:07.726Z","repository":{"id":37893158,"uuid":"96036483","full_name":"ng-select/ng-select","owner":"ng-select","description":":star: Native angular select component","archived":false,"fork":false,"pushed_at":"2026-02-12T04:03:13.000Z","size":126050,"stargazers_count":3377,"open_issues_count":60,"forks_count":926,"subscribers_count":48,"default_branch":"master","last_synced_at":"2026-02-12T13:43:31.986Z","etag":null,"topics":["angular","angular-components","angular2","angular4","angular5","angular6","angular7","angular8","autocomplete","dropdown","hacktoberfest","multiselect","select","typeahead","ui-select"],"latest_commit_sha":null,"homepage":"https://ng-select.github.io/ng-select/","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/ng-select.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["varnastadeus","pavankjadda"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-07-02T16:43:27.000Z","updated_at":"2026-02-12T04:02:12.000Z","dependencies_parsed_at":"2026-02-11T03:23:39.735Z","dependency_job_id":null,"html_url":"https://github.com/ng-select/ng-select","commit_stats":{"total_commits":963,"total_committers":120,"mean_commits":8.025,"dds":0.5752855659397715,"last_synced_commit":"154c45db1377b4cff2e92991dfc96f0930a81905"},"previous_names":[],"tags_count":360,"template":false,"template_full_name":null,"purl":"pkg:github/ng-select/ng-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-select%2Fng-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-select%2Fng-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-select%2Fng-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-select%2Fng-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ng-select","download_url":"https://codeload.github.com/ng-select/ng-select/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng-select%2Fng-select/sbom","scorecard":{"id":114445,"data":{"date":"2025-08-04","repo":{"name":"github.com/ng-select/ng-select","commit":"9a0dc9cd8291fe13462c610e57a7cdc1621b90e4"},"scorecard":{"version":"v5.2.1-28-gc1d103a9","commit":"c1d103a9bb9f635ec7260bf9aa0699466fa4be0e"},"score":5.8,"checks":[{"name":"Maintained","score":10,"reason":"22 commit(s) and 4 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":10,"reason":"all changesets reviewed","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1","Warn: topLevel 'contents' permission set to 'write': .github/workflows/dependabot.yml:5","Warn: no topLevel permission defined: .github/workflows/release.yml:1","Warn: no topLevel permission defined: .github/workflows/stale.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/codeql-analysis.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/dependabot.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/dependabot.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/release.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/ng-select/ng-select/stale.yml/master?enable=pin","Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned","Info: 0 out of 3 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#branch-protection"}},{"name":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/release.yml:9"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#packaging"}},{"name":"SAST","score":10,"reason":"SAST tool is run on all commits","details":["Info: SAST configuration detected: CodeQL","Info: all commits (30) are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"12 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/c1d103a9bb9f635ec7260bf9aa0699466fa4be0e/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T00:37:21.837Z","repository_id":37893158,"created_at":"2025-08-16T00:37:21.837Z","updated_at":"2025-08-16T00:37:21.837Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29986242,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T21:06:37.093Z","status":"ssl_error","status_checked_at":"2026-03-01T21:05:45.052Z","response_time":124,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["angular","angular-components","angular2","angular4","angular5","angular6","angular7","angular8","autocomplete","dropdown","hacktoberfest","multiselect","select","typeahead","ui-select"],"created_at":"2024-08-01T15:01:56.965Z","updated_at":"2026-03-01T22:06:07.716Z","avatar_url":"https://github.com/ng-select.png","language":"TypeScript","readme":" [![npm version](https://badge.fury.io/js/%40ng-select%2Fng-select.svg)](https://badge.fury.io/js/%40ng-select%2Fng-select)\n[![Coverage Status][coveralls-image]][coveralls-url]\n[![gzip size](https://img.shields.io/badge/GZip_size-18.7%20kB-2ca5e0?style=flat-square\u0026logo=npm\u0026labelColor=black)](https://img.shields.io/badge/GZip_size-18.7%20kB-2ca5e0?style=flat-square\u0026logo=npm\u0026labelColor=black)\n[![ng-select channel on discord](https://img.shields.io/discord/873021904708059177.svg?style=flat-square)](https://discord.gg/ETyJTvKK)\n\n[coveralls-image]: https://coveralls.io/repos/github/ng-select/ng-select/badge.svg?branch=master\n[coveralls-url]: https://coveralls.io/github/ng-select/ng-select?branch=master\n[ng-select-url]: https://unpkg.com/@ng-select/ng-select@latest\n\n# Angular ng-select - Lightweight all in one UI Select, Multiselect and Autocomplete\nSee [Demo](https://ng-select.github.io/ng-select) page.\n\n---\n\n## Versions\n\n**Warning**: Do not use versions 15.2.0, 16.0.0, 17.0.0, 18.0.0, 19.0.0, 20.0.0 as they contain unresolved issues\n\n| Angular | ng-select |\n|------------------|:------------------:|\n| \u003e=22.0.0 \u003c23.0.0 | v22.x.x |\n| \u003e=21.0.0 \u003c22.0.0 | v21.x.x |\n| \u003e=20.0.0 \u003c21.0.0 | \u003c=15.1.3, \u003e=20.0.1 |\n| \u003e=19.0.0 \u003c20.0.0 | v14.x |\n| \u003e=18.0.0 \u003c19.0.0 | v13.x |\n| \u003e=17.0.0 \u003c18.0.0 | v12.x |\n| \u003e=16.0.0 \u003c17.0.0 | v11.x |\n| \u003e=15.0.0 \u003c16.0.0 | v10.x |\n| \u003e=14.0.0 \u003c15.0.0 | v9.x |\n| \u003e=13.0.0 \u003c14.0.0 | v8.x |\n| \u003e=12.0.0 \u003c13.0.0 | v7.x |\n| \u003e=11.0.0 \u003c12.0.0 | v6.x |\n| \u003e=10.0.0 \u003c11.0.0 | v5.x |\n| \u003e=9.0.0 \u003c10.0.0 | v4.x |\n| \u003e=8.0.0 \u003c9.0.0 | v3.x |\n| \u003e=6.0.0 \u003c8.0.0 | v2.x |\n| v5.x.x | v1.x |\n\n---\n## Browser Support\n`ng-select` supports all browsers supported by Angular. For current list, see https://angular.io/guide/browser-support#browser-support. This includes the following specific versions:\n```angular2html\nChrome\t2 most recent versions\nFirefox\tlatest and extended support release (ESR)\nEdge\t2 most recent major versions\nSafari\t2 most recent major versions\niOS\t2 most recent major versions\nAndroid\t2 most recent major versions\n```\nTable of contents\n=================\n\n * [Features](#features)\n * [Getting started](#getting-started)\n * [API](#api)\n * [Change detection](#change-detection)\n * [Custom styles](#custom-styles)\n * [Validation state](#validation-state)\n * [Contributing](#contributing)\n * [Development](#development)\n * [Inspiration](#inspiration)\n\n## Features\n- [x] Custom binding to property or object\n- [x] Custom option, label, header and footer templates\n- [x] Virtual Scroll support with large data sets (\u003e5000 items).\n- [x] Infinite scroll\n- [x] Keyboard navigation\n- [x] Multiselect\n- [x] Flexible autocomplete with client/server filtering\n- [x] Custom search\n- [x] Custom tags\n- [x] Append to\n- [x] Group items\n- [x] Output events\n- [x] Accessibility\n- [x] Good base functionality test coverage\n- [x] Themes\n\n## Warning\nLibrary is under active development and may have API breaking changes for subsequent major versions after 1.0.0.\n\n## Getting started\n### Step 1: Install `ng-select`:\n\n#### NPM\n```shell\nnpm install --save @ng-select/ng-select\n```\n#### Yarn\n```shell\nyarn add @ng-select/ng-select\n```\n#### PNPM\n```shell\npnpm add @ng-select/ng-select\n```\n\n### Step 2:\n\n#### Standalone: Import NgSelectComponent and other necessary directives directly:\n```typescript\nimport { NgLabelTemplateDirective, NgOptionTemplateDirective, NgSelectComponent } from '@ng-select/ng-select';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n selector: 'example',\n standalone: true,\n template: './example.component.html',\n styleUrl: './example.component.scss',\n imports: [\n NgLabelTemplateDirective,\n NgOptionTemplateDirective,\n NgSelectComponent,\n ],\n})\nexport class ExampleComponent {}\n```\n\n#### NgModule: Import the NgSelectModule and angular FormsModule module:\n```typescript\nimport { NgSelectModule } from '@ng-select/ng-select';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [NgSelectModule, FormsModule],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n### Step 3: Include a theme:\nTo allow customization and theming, `ng-select` bundle includes only generic styles that are necessary for correct layout and positioning. To get full look of the control, include one of the themes in your application. If you're using the Angular CLI, you can add this to your `styles.scss` or include it in `.angular-cli.json` (Angular v5 and below) or `angular.json` (Angular v6 onwards).\n\n```scss\n@import \"~@ng-select/ng-select/themes/default.theme.css\";\n// ... or\n@import \"~@ng-select/ng-select/themes/material.theme.css\";\n\n```\n\n\n### Step 4 (Optional): Configuration\n\nYou can also set global configuration and localization messages by injecting NgSelectConfig service,\ntypically in your root component, and customize the values of its properties in order to provide default values.\n\n```js\n constructor(private config: NgSelectConfig) {\n this.config.notFoundText = 'Custom not found';\n this.config.appendTo = 'body';\n // set the bindValue to global config when you use the same\n // bindValue in most of the place.\n // You can also override bindValue for the specified template\n // by defining `bindValue` as property\n // Eg : \u003cng-select bindValue=\"some-new-value\"\u003e\u003c/ng-select\u003e\n this.config.bindValue = 'value';\n }\n```\n\n### Usage\nDefine options in your consuming component:\n```js\n@Component({...})\nexport class ExampleComponent {\n\n selectedCar: number;\n\n cars = [\n { id: 1, name: 'Volvo' },\n { id: 2, name: 'Saab' },\n { id: 3, name: 'Opel' },\n { id: 4, name: 'Audi' },\n ];\n}\n```\nIn template use `ng-select` component with your options\n\n```html\n\u003c!--Using ng-option and for loop--\u003e\n\u003cng-select [(ngModel)]=\"selectedCar\"\u003e\n @for (car of cars; track car.id) {\n \u003cng-option [value]=\"car.id\"\u003e{{car.name}}\u003c/ng-option\u003e\n }\n\u003c/ng-select\u003e\n\n\u003c!--Using items input--\u003e\n\u003cng-select [items]=\"cars\"\n bindLabel=\"name\"\n bindValue=\"id\"\n [(ngModel)]=\"selectedCar\"\u003e\n\u003c/ng-select\u003e\n```\nFor more detailed examples see [Demo](https://ng-select.github.io/ng-select#/data-sources) page\n\n### SystemJS\nIf you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.\n\nIn your systemjs config file, `map` needs to tell the System loader where to look for `ng-select`:\n```js\nmap: {\n '@ng-select/ng-select': 'node_modules/@ng-select/ng-select/bundles/ng-select.umd.js',\n}\n```\n\n## API\n### Inputs\n| Input | Type | Default | Required | Description |\n|-----------------------------|------------------------------------------------------|---------------------| ------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [addTag] | `boolean \\| ((term: string) =\u003e any \\| Promise\u003cany\u003e)` | `false` | no | Allows to create custom options. |\n| addTagText | `string` | `Add item` | no | Set custom text when using tagging |\n| appearance | `string` | `underline` | no | Allows to select dropdown appearance. Set to `outline` or `fill` for Material form-field styles (applies only to Material theme) |\n| appendTo | `string` | null | no | Append dropdown to body or any other element using css selector. For correct positioning `body` should have `position:relative` |\n| bufferAmount | `number` | 4 | no | Used in virtual scrolling, the `bufferAmount` property controls the number of items preloaded in the background to ensure smoother and more seamless scrolling. |\n| bindValue | `string` | `-` | no | Object property to use for selected model. By default binds to whole object. |\n| bindLabel | `string` | `label` | no | Object property to use for label. Default `label` |\n| [closeOnSelect] | `boolean` | true | no | Whether to close the menu when a value is selected |\n| clearAllText | `string` | `Clear all` | no | Set custom text for clear all icon title |\n| [clearable] | `boolean` | `true` | no | Allow to clear selected value. Default `true` |\n| [clearOnBackspace] | `boolean` | `true` | no | Clear selected values one by one when clicking backspace. Default `true` |\n| [compareWith] | `(a: any, b: any) =\u003e boolean` | `(a, b) =\u003e a === b` | no | A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection(model). A boolean should be returned. |\n| dropdownPosition | `bottom` \\| `top` \\| `auto` | `auto` | no | Set the dropdown position on open |\n| [fixedPlaceholder] | `boolean` | `false` | no | Set placeholder visible even when an item is selected |\n| [groupBy] | `string` \\| `Function` | null | no | Allow to group items by key or function expression |\n| [groupValue] | `(groupKey: string, children: any[]) =\u003e Object` | - | no | Function expression to provide group value |\n| [selectableGroup] | `boolean` | false | no | Allow to select group when groupBy is used |\n| [selectableGroupAsModel] | `boolean` | true | no | Indicates whether to select all children or group itself |\n| [items] | `Array\u003cany\u003e` | `[]` | yes | Items array |\n| [loading] | `boolean` | `-` | no | You can set the loading state from the outside (e.g. async items loading) |\n| loadingText | `string` | `Loading...` | no | Set custom text when for loading items |\n| labelForId | `string` | `-` | no | Id to associate control with label. |\n| [markFirst] | `boolean` | `true` | no | Marks first item as focused when opening/filtering. |\n| [isOpen] | `boolean` | `-` | no | Allows manual control of dropdown opening and closing. `true` - won't close. `false` - won't open. |\n| maxSelectedItems | `number` | none | no | When multiple = true, allows to set a limit number of selection. |\n| [hideSelected] | `boolean` | `false` | no | Allows to hide selected items. |\n| [multiple] | `boolean` | `false` | no | Allows to select multiple items. |\n| notFoundText | `string` | `No items found` | no | Set custom text when filter returns empty result |\n| placeholder | `string` | `-` | no | Placeholder text. |\n| [searchable] | `boolean` | `true` | no | Allow to search for value. Default `true` |\n| [readonly] | `boolean` | `false` | no | Set ng-select as readonly. Mostly used with reactive forms. |\n| [searchFn] | `(term: string, item: any) =\u003e boolean` | `null` | no | Allow to filter by custom search function |\n| [searchWhileComposing] | `boolean` | `true` | no | Whether items should be filtered while composition started |\n| [trackByFn] | `(item: any) =\u003e any` | `null` | no | Provide custom trackBy function |\n| [clearSearchOnAdd] | `boolean` | `true` | no | Clears search input when item is selected. Default `true`. Default `false` when **closeOnSelect** is `false` |\n| [deselectOnClick] | `boolean` | `false` | no | Deselects a selected item when it is clicked in the dropdown. Default `false`. Default `true` when **multiple** is `true` |\n| [editableSearchTerm] | `boolean` | `false` | no | Allow to edit search query if option selected. Default `false`. Works only if multiple is `false`. |\n| [selectOnTab] | `boolean` | `false` | no | Select marked dropdown item using tab. Default `false` |\n| [tabFocusOnClearButton] | `boolean` | `true` | no | Control tab navigation behavior for the clear button. Default `true` |\n| [openOnEnter] | `boolean` | `true` | no | Open dropdown using enter. Default `true` |\n| outsideClickEventType | `'click'` \\| `'mousedown'` | `'click'` | no | Configure which DOM event type is used for outside click detection. Use `'mousedown'` to fix issues with backdrop/loading overlays that appear on dropdown open |\n| [typeahead] | `Subject` | `-` | no | Custom autocomplete or advanced filter. |\n| [minTermLength] | `number` | `0` | no | Minimum term length to start a search. Should be used with `typeahead` |\n| typeToSearchText | `string` | `Type to search` | no | Set custom text when using Typeahead |\n| [virtualScroll] | `boolean` | false | no | Enable virtual scroll for better performance when rendering a lot of data |\n| [inputAttrs] | `{ [key: string]: string }` | `-` | no | Pass custom attributes to underlying `input` element |\n| [tabIndex] | `number` | `-` | no | Set tabindex on ng-select |\n| [preventToggleOnRightClick] | `boolean` | `false` | no | Prevent opening of ng-select on right mouse click |\n| [keyDownFn] | `($event: KeyboardEvent) =\u003e bool` | `true` | no | Provide custom keyDown function. Executed before default handler. Return false to suppress execution of default key down handlers |\n\n### Outputs\n\n| Output | Description |\n| ------------- | ------------- |\n| (add) | Fired when item is added while `[multiple]=\"true\"`. Outputs added item |\n| (blur) | Fired on select blur |\n| (change) | Fired on model change. Outputs whole model |\n| (close) | Fired on select dropdown close |\n| (clear) | Fired on clear icon click |\n| (focus) | Fired on select focus |\n| (search) | Fired while typing search term. Outputs search term with filtered items |\n| (open) | Fired on select dropdown open |\n| (remove) | Fired when item is removed while `[multiple]=\"true\"` |\n| (scroll) | Fired when scrolled (only when `[virtualScroll]=\"true\"`). Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list. |\n| (scrollToEnd) | Fired when scrolled to the end of items. Can be used for loading more items in chunks. |\n\n\n### Methods\n Name | Description |\n| ------------- | ------------- |\n| open | Opens the select dropdown panel |\n| close | Closes the select dropdown panel |\n| focus | Focuses the select element |\n| blur | Blurs the select element |\n\n### Other\n Name | Type | Description |\n| ------------- | ------------- | ------------- |\n| [ngOptionHighlight] | directive | Highlights search term in option. Accepts search term. Should be used on option element. [README](https://github.com/ng-select/ng-select/blob/master/src/ng-option-highlight/README.md) |\n| NgSelectConfig | configuration | Configuration provider for the NgSelect component. You can inject this service and provide application wide configuration. |\n| SELECTION_MODEL_FACTORY | service | DI token for SelectionModel implementation. You can provide custom implementation changing selection behaviour. |\n\n## Custom selection logic\nNg-select allows to provide custom selection implementation using `SELECTION_MODEL_FACTORY`. To override [default](https://github.com/ng-select/ng-select/blob/master/src/ng-select/lib/selection-model.ts) logic provide your factory method in your angular module.\n\n```javascript\n// app.module.ts.ts\nproviders: [\n { provide: SELECTION_MODEL_FACTORY, useValue: \u003cSelectionModelFactory\u003eCustomSelectionFactory }\n]\n\n// selection-model.ts\nexport function CustomSelectionFactory() {\n return new CustomSelectionModel();\n}\n\nexport class CustomSelectionModel implements SelectionModel {\n ...\n}\n```\n\n## Change Detection\nNg-select component implements `OnPush` change detection which means the dirty checking checks for immutable\ndata types. That means if you do object mutations like:\n\n```javascript\nthis.items.push({id: 1, name: 'New item'})\n```\n\nComponent will not detect a change. Instead you need to do:\n\n```javascript\nthis.items = [...this.items, {id: 1, name: 'New item'}];\n```\n\nThis will cause the component to detect the change and update. Some might have concerns that\nthis is a pricey operation, however, it is much more performant than running `ngDoCheck` and\nconstantly diffing the array.\n\n## Custom styles\nIf you are not happy with default styles you can easily override them with increased selector specificity or creating your own theme. This applies if you are using no `ViewEncapsulation` or adding styles to global stylesheet. E.g.\n\n```html\n\u003cng-select class=\"custom\"\u003e\u003c/ng-select\u003e\n```\n\n```css\n.ng-select.custom {\n border:0px;\n min-height: 0px;\n border-radius: 0;\n}\n.ng-select.custom .ng-select-container {\n min-height: 0px;\n border-radius: 0;\n}\n```\n\nIf you are using `ViewEncapsulation`, you could use special `::ng-deep` selector which will prevent scoping for nested selectors altough this is more of a workaround and we recommend using solution described above.\n\n```css\n.ng-select.custom ::ng-deep .ng-select-container {\n min-height: 0px;\n border-radius: 0;\n}\n```\nWARNING: Keep in mind that ng-deep is deprecated and there is no alternative to it yet. See [Here](https://github.com/angular/angular/issues/17867).\n\n### Validation state\nBy default when you use reactive forms validators or template driven forms validators css class `ng-invalid` will be applied on ng-select. You can show errors state by adding custom css style\n\n```css\nng-select.ng-invalid.ng-touched .ng-select-container {\n border-color: #dc3545;\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;\n}\n```\n\n## Contributing\n\nContributions are welcome. You can start by looking at [issues](https://github.com/ng-select/ng-select/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) with label *Help wanted* or creating new Issue with proposal or bug report.\nNote that we are using https://conventionalcommits.org/ commits format.\n\n## Development\n\nPerform the _clone-to-launch_ steps with these terminal commands.\n\n### Run demo page in watch mode\n```\ngit clone https://github.com/ng-select/ng-select\ncd ng-select\npnpm i\npnpm run start\n```\n### Testing\n```\npnpm test\nor\npnpm test:watch\n```\n\n### Release\n\nTo release to npm just run `./release.sh`, of course if you have permissions ;)\n\n## Inspiration\nThis component is inspired by [React select](https://github.com/JedWatson/react-select) and [Virtual scroll](https://github.com/rintoj/angular2-virtual-scroll). Check theirs amazing work and components :)\n","funding_links":["https://github.com/sponsors/varnastadeus","https://github.com/sponsors/pavankjadda"],"categories":["TypeScript","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","Third Party Components","Dependencies"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Form Controls","Forms"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fng-select%2Fng-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fng-select%2Fng-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fng-select%2Fng-select/lists"}