{"id":20774111,"url":"https://github.com/pchmn/ng-select-filtering","last_synced_at":"2026-04-21T15:33:30.182Z","repository":{"id":65457933,"uuid":"184882485","full_name":"pchmn/ng-select-filtering","owner":"pchmn","description":null,"archived":false,"fork":false,"pushed_at":"2020-02-03T09:50:27.000Z","size":1134,"stargazers_count":1,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-02-18T23:48:43.320Z","etag":null,"topics":[],"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/pchmn.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":"2019-05-04T10:45:14.000Z","updated_at":"2020-02-03T09:50:29.000Z","dependencies_parsed_at":"2023-01-24T12:45:32.771Z","dependency_job_id":null,"html_url":"https://github.com/pchmn/ng-select-filtering","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pchmn%2Fng-select-filtering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pchmn%2Fng-select-filtering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pchmn%2Fng-select-filtering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pchmn%2Fng-select-filtering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pchmn","download_url":"https://codeload.github.com/pchmn/ng-select-filtering/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243112190,"owners_count":20238182,"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":[],"created_at":"2024-11-17T12:28:25.331Z","updated_at":"2026-04-21T15:33:25.137Z","avatar_url":"https://github.com/pchmn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[IN DEVELOPMENT - NOT READY TO USE]\n\n# ng-select-filtering\n\nSelect with filtering component for Angular using Bootstrap style.\n\n## Getting started\n\n### Prerequisites\n\nYou need Bootstrap in your project because `ng-select-filtering` is based on Boostrap css.\n\n#### Import Bootstrap css via npm\n\nFirst install Bootstrap package :\n\n```\nnpm install --save bootstrap\n```\n\nThen add Bootstrap css in your `angular.json` file :\n```json\n{\n  \"styles\": [\n    \"node_modules/bootstrap/dist/css/bootstrap.min.css\"\n  ]\n}\n```\n\nOr directly in your `style.scss` or `style.css` file :\n```css\n@import '~bootstrap/dist/css/bootstrap.min.css';\n```\n\n#### Or import Bootstrap css via cdn\nIn your `index.html` file (cf [official doc](https://getbootstrap.com/docs/4.3/getting-started/download/#bootstrapcdn)) :\n```html\n\u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\"\u003e\n```\n\n### Install `ng-select-filtering`\n```\nnpm install --save ng-select-filtering\n```\n\n\n## Basic usage\n\n### Import `NgSelectFilteringModule` (and `FormsModule` to use `ngModel`)\n```js\nimport { NgSelectFilteringModule } from 'ng-select-filtering';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [NgSelectFilteringModule, FormsModule],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n### Use `ng-select-filtering` component\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\nselector: 'app-component',\ntemplate: `\n  \u003cng-select-filtering\n    [(ngModel)]=\"citySelected\"\n    [items]=\"cities\"\n    bindValue=\"postCode\"\n    bindLabel=\"city\"\u003e\n  \u003c/ng-select-filtering\u003e\n `\n})\nexport class AppComponent {\n  cities: any[] = [\n    {postCode: '35000', city: 'Rennes'},\n    {postCode: '75000', city: 'Paris'}\n  ];\n  citySelected: any;\n}\n```\n\n## Custom templates\nYou can use custom templates for the value selected (which will be displayed in the select button view) or for each item view in the dropdown menu.\n\n### Custom value template\n```html\n\u003cng-select-filtering [(ngModel)]=\"citySelected\" [items]=\"cities\" bindValue=\"postCode\" bindLabel=\"city\"\u003e\n  \u003cng-template ngValueTemplate let-value=\"value\"\u003e\n    \u003cspan\u003e{{ value.postCode }} - {{ value.city }}\u003c/span\u003e\n  \u003c/ng-template\u003e\n\u003c/ng-select-filtering\u003e\n```\n`let-value` is the value selected (whole object).\n\n### Custom item template\n```html\n\u003cng-select-filtering [(ngModel)]=\"citySelected\" [items]=\"cities\" bindValue=\"postCode\" bindLabel=\"city\"\u003e\n  \u003cng-template ngItemTemplate let-item=\"item\" let-filterTerm=\"filterTerm\"\u003e\n    \u003cspan\u003e{{ item.city }}\u003c/span\u003e\n    \u003cspan style=\"float: right\"\u003e{{ item.postCode }}\u003c/span\u003e\n  \u003c/ng-template\u003e\n\u003c/ng-select-filtering\u003e\n```\n`let-item` corresponds to each item of the list.\n\n`let-filterTerm` corresponds to the text entered in the filter input.\n\n## API\n### Inputs\nName | Type | Default | Description\n--- | --- | --- | ---\n`items` | `any[]` | `[]` | Items list.\n`bindValue` | `string` | / | Property to bind for selected model. By default whole object is binded.\n`bindLabel` | `string` | / | Property to bind for label displayed. By default whole object is binded.\n`placeholderSelect` | `string` | `Select a value` | Placeholder displayed in select button.\n`placeholderFilter` | `string` | `Enter a filter` | Placeholder displayed in filter input.\n`filterBy` | `string[]` | / | Properties to use for filtering. By default filter on all object properties.\n`maxWidth` | `number` | / | Max width of dropdown menu in pixels. By default same width of select button.\n`maxVisibleItems` | `number` | `5` | Maximum visible items in dropdown menu.\n\n### Outputs\nName | Event payload | Description\n--- | --- | ---\n`openChange` | `boolean` | Event fired when select dropdown opens (payload = `true`) or closes (payload = `false`).\n`valueChange` | `any` | Event fired when value selected changes (whole object).\n`filter` | `{ filterTerm: string, filteredItems: any[] }` | Event fired when filter is typed. Emit the filter term and the filtered items.\n\n### Methods\nName | Parameters | Returned type | Description\n--- | --- | --- | ---\n`open` | / | `void` | Open select dropdown.\n`close` | / | `void` | Close select dropdown.\n\n## Credits\nThis library is greatly inspired by  [ng-select](https://github.com/ng-select/ng-select).\n\n## License\n```\nThe MIT License (MIT)\n\nCopyright (c) 2019 pchmn\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the \"Software\"),\nto deal in the Software without restriction, including without limitation the\nrights to use, copy, modify, merge, publish, distribute, sublicense, and/or\nsell copies of the Software, and to permit persons to whom the Software is \nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in \nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\nINCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A \nPARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT \nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION \nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE \nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpchmn%2Fng-select-filtering","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpchmn%2Fng-select-filtering","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpchmn%2Fng-select-filtering/lists"}