{"id":23624556,"url":"https://github.com/Harvest-Dev/ng-select2","last_synced_at":"2025-08-31T00:31:08.029Z","repository":{"id":32718392,"uuid":"139598977","full_name":"Harvest-Dev/ng-select2","owner":"Harvest-Dev","description":"A select2 for Angular ","archived":false,"fork":false,"pushed_at":"2025-06-13T21:43:27.000Z","size":9636,"stargazers_count":58,"open_issues_count":13,"forks_count":35,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-16T12:41:12.639Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Harvest-Dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.md","dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-07-03T14:53:42.000Z","updated_at":"2025-07-24T14:35:44.000Z","dependencies_parsed_at":"2023-12-04T22:28:22.855Z","dependency_job_id":"aff4b591-48f2-477b-902c-c5da41dfa93a","html_url":"https://github.com/Harvest-Dev/ng-select2","commit_stats":{"total_commits":274,"total_committers":12,"mean_commits":"22.833333333333332","dds":0.3284671532846716,"last_synced_commit":"d062d7ddbd69a10b97870caacd213c81077880ca"},"previous_names":["zefling/ng-select2"],"tags_count":77,"template":false,"template_full_name":null,"purl":"pkg:github/Harvest-Dev/ng-select2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-select2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-select2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-select2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-select2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Harvest-Dev","download_url":"https://codeload.github.com/Harvest-Dev/ng-select2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Harvest-Dev%2Fng-select2/sbom","scorecard":{"id":61440,"data":{"date":"2025-08-11","repo":{"name":"github.com/Harvest-Dev/ng-select2","commit":"7cd5b40266530afbc1f0ba125b2fac9e4cb4bc7a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.6,"checks":[{"name":"Code-Review","score":1,"reason":"Found 4/23 approved changesets -- score normalized to 1","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/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":3,"reason":"3 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"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/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"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/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"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/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"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/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"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/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-15T01:48:01.481Z","repository_id":32718392,"created_at":"2025-08-15T01:48:01.481Z","updated_at":"2025-08-15T01:48:01.481Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272926171,"owners_count":25016423,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-12-27T21:01:08.230Z","updated_at":"2025-08-31T00:31:08.017Z","avatar_url":"https://github.com/Harvest-Dev.png","language":"TypeScript","readme":"[![npm version](https://badge.fury.io/js/ng-select2-component.svg)](https://badge.fury.io/js/ng-select2-component) [![Downloads](https://img.shields.io/npm/dm/ng-select2-component.svg)](https://www.npmjs.com/package/ng-select2-component) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Harvest-Dev/ng-select2/master/LICENSE.md)\n\n# Select2\n\nThis Angular CLI module it's a fork of [select2-component](https://github.com/plantain-00/select2-component) without Vue \u0026 React. For Vue or React, please use the original component.\n\n## Installation\n\n```\nnpm i ng-select2-component --save\n```\n\n## Requirements\n\n- peerDependencies:\n\n    - `angular` 18.1.0 and more\n    - `angular/cdk` 18.1.0 and more\n\n- dependencies (include):\n\n    - `ngx-infinite-scroll` 19.0.0 and more\n\n### Notes\n\n| Version   | For **Angular** | Notes             |\n| --------- | --------------- | ----------------- |\n| `17.2.0`  | 18.1 and more   | Ivy / Stand-alone |\n| `17.1.0`  | 19              | Ivy / Stand-alone |\n| `16.0.0`  | 19              | Ivy / Module      |\n| `15.4.0`  | 18              | Ivy               |\n| `14.0.1`  | 17              | Ivy               |\n| `13.0.12` | 16.1            | Ivy               |\n| `12.1.0`  | 16              | Ivy               |\n| `11.1.0`  | 15              | Ivy               |\n| `10.0.0`  | 14              | Ivy               |\n| `9.0.0`   | 13              | Ivy               |\n| `8.1.0`   | 10, 11 and 12   | View Engine       |\n| `7.3.1`   | 7, 8 and 9      | View Engine       |\n\n## Demo\n\n[See a demo and code generator](https://harvest-dev.github.io/ng-select2/dist/ng-select2/browser).\n\n## Features\n\n- select one\n- options or groups (list or grid)\n- scroll\n- local search\n- select by keyboard\n- disabled option\n- disabled component\n- hide search box\n- placeholder\n- multiple selection\n- add items not found in multiple\n- material style\n- form binding\n- templating\n- drag'n drop\n- WAI (accessibility)\n- etc.\n\n## Usage\n\n### example\n\n```ts\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Select2, Select2Hint, Select2Label } from 'ng-select2-component';\n\n@Component({\n    selector: 'my-component',\n    templateUrl: './my-component.component.html',\n    styleUrls: ['./my-component.component.scss'],\n    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Hint, Select2Label],\n})\nclass MyComponent {}\n```\n\n```html\n\u003cselect2 [data]=\"data\" [value]=\"value\" (update)=\"update($event)\"\u003e \u003c/select2\u003e\n```\n\n### properties and events of the component\n\n| name                                                                      | type                                                                                                 | default              | description                                                                                                             | required                        |\n| ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------- |\n| `data` (required)                                                         | [`Select2Data`](#select2-data-structure)                                                             |                      | the data of the select2                                                                                                 |                                 |\n| `value`                                                                   | [`Select2Value`](#select2-data-structure)                                                            |                      | initial value                                                                                                           |                                 |\n| `minCharForSearch`                                                        | `number`                                                                                             | `0`                  | start the search when the number of characters is reached (`0` = unlimited)                                             |                                 |\n| `minCountForSearch`                                                       | `number`                                                                                             | `6`                  | hide search box if `options.length \u003c minCountForSearch`                                                                 |                                 |\n| `displaySearchStatus`                                                     | `'default'`\u003cbr\u003e`'hidden'`\u003cbr\u003e`'always'`                                                              | `'default'`          | display the search box (`default` : is based on `minCountForSearch`)                                                    |                                 |\n| `placeholder`                                                             | `string`                                                                                             |                      | the placeholder string if nothing selected                                                                              |                                 |\n| `noResultMessage`                                                         | `string`                                                                                             |                      | the message string if no results when using the search field                                                            |                                 |\n| `customSearchEnabled`                                                     | `boolean`                                                                                            | `false`              | will trigger `search` event, and disable inside filter                                                                  |                                 |\n| `multiple`                                                                | `boolean`                                                                                            | `false`              | select multiple options                                                                                                 |                                 |\n| `multipleDrag`                                                            | `boolean`                                                                                            | `false`              | drag'n drop list of items in selection                                                                                  | with `multiple`                 |\n| `resettable`                                                              | `boolean`                                                                                            | `false`              | add a button to reset value                                                                                             |                                 |\n| `resetSelectedValue`                                                      | `any`                                                                                                | `undefined`          | selected option when × is clicked                                                                                       |                                 |\n| `autoCreate`                                                              | `boolean`                                                                                            | `false`              | gives the possibility to add elements not present in the list.                                                          |                                 |\n| `limitSelection`                                                          | `number`                                                                                             | `0`                  | to limit multiple selection (`0` = unlimited)                                                                           |                                 |\n| `hideSelectedItems`                                                       | `boolean`                                                                                            | `false`              | remove selected values                                                                                                  | with `multiple`                 |\n| `resultMaxHeight`                                                         | `string`                                                                                             | `'200px'`            | change the height size of results                                                                                       |                                 |\n| `maxResults`                                                              | `number`                                                                                             | `0`                  | maximum results limit (`0` = unlimited)                                                                                 |                                 |\n| `maxResultsMessage`                                                       | `string`                                                                                             | `'Too much result…'` | message when maximum result                                                                                             |                                 |\n| `grid`                                                                    | `number` or `string`                                                                                 |                      | option by line in grid layout (empty or `0` = no grid layout)\u003cbr\u003e`number`: item by line\u003cbr\u003e`string`: minimal item width |                                 |\n| `listPosition`                                                            | `'below'`\u003cbr\u003e`'above'`\u003cbr\u003e`'auto'` ¹                                                                 | `'below'`            | the position for the dropdown list                                                                                      | ¹ `'auto'`: only with `overlay` |\n| `infiniteScroll`                                                          | `boolean`                                                                                            | `false`              | active infiniteScroll on dropdown list                                                                                  | with `ngx-infinite-scroll`      |\n| `infiniteScrollDistance`                                                  | `number`                                                                                             | `1.5`                | infiniteScroll distance                                                                                                 | with `ngx-infinite-scroll`      |\n| `infiniteScrollThrottle`                                                  | `number`                                                                                             | `150`                | infiniteScroll throttle                                                                                                 |                                 |\n| `overlay`                                                                 | `boolean`                                                                                            | `false`              | active an overlay mode for dropdown list (with angular cdk). (See [Overlay](#overlay))                                  |                                 |\n| `styleMode`                                                               | `'default'`\u003cbr\u003e`'material'`\u003cbr\u003e`'noStyle'`\u003cbr\u003e`'borderless'`                                         | `'default'`          | change style for material style or remove border and background color                                                   |                                 |\n| `templates`                                                               | [`Select2Template`](#select2-data-structure)\u003cbr\u003e(see ”possible object” in [Templating](#templating)) |                      | use templates for formatting content (see [Templating](#templating))                                                    |                                 |\n| `templateSelection`                                                       | `TemplateRef`                                                                                        |                      | use templates for formatting content (see [Templating](#templating))                                                    |                                 |\n| `noLabelTemplate`                                                         | `boolean`                                                                                            | `false`              | do not use the template in the selection, stay in text mode                                                             |                                 |\n| `selectionOverride`                                                       | [`Select2SelectionOverride`](#select2-data-structure)                                                |                      | Replace selection by a text\u003cbr\u003e`string`: `%size%` = total selected options\u003cbr\u003e`function`: juste show the string         |                                 |\n| `selectionNoWrap`                                                         | `boolean`                                                                                            | `false`              | Force selection on one line                                                                                             |                                 |\n| `showSelectAll`                                                           | `boolean`                                                                                            | `false`              | Add an option to select all options                                                                                     | with `multiple`                 |\n| `selectAllText`                                                           | `string`                                                                                             | `'Select all'`       | Text when all options as not selected                                                                                   | with `multiple`                 |\n| `removeAllText`                                                           | `string`                                                                                             | `'Remove all'`       | Text when all options as selected                                                                                       | with `multiple`                 |\n| `editPattern`                                                             | `(str: string) =\u003e string`                                                                            |                      | use it for change the pattern of the filter search                                                                      |                                 |\n| `nativeKeyboard`                                                          | `boolean`                                                                                            | `false`              | Use the keyboard navigation like native HTML select component                                                           | not with `multiple`             |\n| `ngModel`\u003cbr\u003e`id`\u003cbr\u003e`required`\u003cbr\u003e`disabled`\u003cbr\u003e`readonly`\u003cbr\u003e`tabIndex` |                                                                                                      |                      | just like a `select` control                                                                                            |                                 |\n| `(update)`                                                                | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) =\u003e void`                                 |                      | triggered when user select an option                                                                                    |                                 |\n| `(open)`                                                                  | `(event: Select2) =\u003e void`                                                                           |                      | triggered when user open the options                                                                                    |                                 |\n| `(close)`                                                                 | `(event: Select2) =\u003e void`                                                                           |                      | triggered when user close the options                                                                                   |                                 |\n| `(focus)`                                                                 | `(event: Select2) =\u003e void`                                                                           |                      | triggered when user enters the component                                                                                |                                 |\n| `(blur)`                                                                  | `(event: Select2) =\u003e void`                                                                           |                      | triggered when user leaves the component                                                                                |                                 |\n| `(search)`                                                                | `(event: `[`Select2SearchEvent`](#select2-data-structure)`) =\u003e void`                                 |                      | triggered when search text changed                                                                                      | with `customSearchEnabled`      |\n| `(scroll)`                                                                | `(event: `[`Select2ScrollEvent`](#select2-data-structure)`) =\u003e void`                                 |                      | triggered when infiniteScroll is on `up` or `down` position                                                             | with `ngx-infinite-scroll`      |\n| `(removeOption)`                                                          | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) =\u003e void`                                 |                      | triggered when an option is removed from the list of selected options options list                                      | with `multiple`                 |\n| `(autoCreateItem)`                                                        | `(event: `[`Select2AutoCreateEvent`](#select2-data-structure)`) =\u003e void`                             |                      | triggered when a new item has been added                                                                                | with `autoCreate`               |\n\n### select2 data structure\n\n```ts\nexport interface Select2Group {\n    /** label of group */\n    label: string;\n    /** options list */\n    options: Select2Option[];\n    /** add classes  */\n    classes?: string;\n    /** template id dropdown \u0026 selection if no templateSelectionId */\n    templateId?: string;\n    /** template data  */\n    data?: any;\n}\n\nexport interface Select2Option {\n    /** value  */\n    value: Select2Value;\n    /** label of option */\n    label: string;\n    /** no selectable is disabled */\n    disabled?: boolean;\n    /** for identification */\n    id?: string;\n    /** add classes  */\n    classes?: string;\n    /** template id dropdown \u0026 selection if no templateSelectionId */\n    templateId?: string;\n    /** template id for selection */\n    templateSelectionId?: string;\n    /** template data  */\n    data?: any;\n    /** hide this option */\n    hide?: boolean;\n}\n\nexport type Select2Value = string | number | boolean | object | null | undefined;\n\nexport type Select2UpdateValue = Select2Value | Select2Value[] | undefined | null;\n\nexport type Select2Data = (Select2Group | Select2Option)[];\n\nexport interface Select2UpdateEvent\u003cU extends Select2UpdateValue = Select2Value\u003e {\n    /** component */\n    readonly component: Select2;\n    /** current selected value */\n    readonly value: U | null;\n    /** selected option */\n    readonly options: Select2Option[] | null;\n}\n\nexport interface Select2AutoCreateEvent\u003cU extends Select2UpdateValue = Select2Value\u003e {\n    /** component */\n    readonly component: Select2;\n    /** current selected value */\n    readonly value: U;\n    /** selected option */\n    readonly options: Select2Option[] | null;\n}\n\nexport interface Select2SearchEvent\u003cU extends Select2UpdateValue = Select2Value\u003e {\n    /** component */\n    readonly component: Select2;\n    /** current selected value */\n    readonly value: U | null;\n    /** search text */\n    readonly search: string;\n    /** current data source */\n    readonly data: Select2Data;\n    /** method to call to update the data */\n    readonly filteredData: (data: Select2Data) =\u003e void;\n}\n\nexport interface Select2RemoveEvent\u003cU extends Select2UpdateValue = Select2Value\u003e {\n    /** component */\n    readonly component: Select2;\n    /** current selected value */\n    readonly value: U;\n    /** remove */\n    readonly removedOption: Select2Option;\n}\n\nexport interface Select2ScrollEvent {\n    /** component */\n    readonly component: Select2;\n    /** scroll way */\n    readonly way: 'up' | 'down';\n    /** search text */\n    readonly search: string;\n    /** current data */\n    readonly data: Select2Data;\n}\n\nexport type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) =\u003e string);\n\nexport type Select2Template = TemplateRef\u003cany\u003e | { [key: string]: TemplateRef\u003cany\u003e } | undefined;\n```\n\n### Templating\n\n#### Unique template\n\n```html\n\u003cselect2 [data]=\"data\" [templates]=\"template\"\u003e\n    \u003cng-template #template let-data=\"data\"\u003e\u003cstrong\u003e{{data?.color}}\u003c/strong\u003e: {{data?.name}}\u003c/ng-template\u003e\n\u003c/select2\u003e\n```\n\n```ts\nconst data: Select2Data = [\n    {\n        value: 'heliotrope',\n        label: 'Heliotrope',\n        data: { color: 'white', name: 'Heliotrope' },\n    },\n    {\n        value: 'hibiscus',\n        label: 'Hibiscus',\n        data: { color: 'red', name: 'Hibiscus' },\n    },\n];\n```\n\n#### Template group \u0026 option\n\n```html\n\u003cselect2 [data]=\"data\" [templates]=\"{option : option, group: group}\"\u003e\n    \u003cng-template #option let-data=\"data\"\u003e{{data?.name}}\u003c/ng-template\u003e\n    \u003cng-template #group let-label=\"label\"\u003eGroup: {{label}}\u003c/ng-template\u003e\n\u003c/select2\u003e\n```\n\nNo difference in data structure.\nThe template is defined by its type, option or group, automatically.\n\n#### Template by templateId\n\n```html\n\u003cselect2 [data]=\"data\" [templates]=\"{template1 : template1, template2: template2}\"\u003e\n    \u003cng-template #template1 let-data=\"data\"\u003e{{data?.name}}\u003c/ng-template\u003e\n    \u003cng-template #template2 let-label=\"label\" let-data=\"data\"\u003e{{label}} : {{data?.color}}\u003c/ng-template\u003e\n\u003c/select2\u003e\n```\n\n```ts\nconst data: Select2Data = [\n    {\n        value: 'heliotrope',\n        label: 'Heliotrope',\n        data: { color: 'white', name: 'Heliotrope' },\n        templateId: 'template1',\n    },\n    {\n        value: 'hibiscus',\n        label: 'Hibiscus',\n        data: { color: 'red', name: 'Hibiscus' },\n        templateId: 'template2',\n    },\n];\n```\n\n#### Template for change the selection\n\n```html\n\u003cselect2 [data]=\"data\" [templateSelection]=\"templateSelection\"\u003e\n    \u003cng-template #templateSelection let-data=\"data\"\u003e\u003cstrong\u003e{{ data?.color }}\u003c/strong\u003e ({{ data?.name }})\u003c/ng-template\u003e\n\u003c/select2\u003e\n```\n\n#### Possible object\n\n- `TemplateRef`\n- `{template: TemplateRef}`\n- `{option?: TemplateRef, group?: TemplateRef}`\n- `{templateId1: TemplateRef, ...}`\n\nIn addition to the rendering templates of options and groups, in addition to going through the `templateSelection` attribute, it is possible to define that of the selection :\n\n- `{templateSelection: TemplateRef}`\n- `{optionSelection: TemplateRef}`\n\n#### Priority order\n\nFor group or option:\n\n- `'id'` (from item data `templateId`)\n- `'group'` or `'option'`\n- `'template'`\n- `TemplateRef` (from html attribute `templates`)\n- Default render\n\nFor the selection:\n\n- `'id'` (from item data `templateSelectionId`)\n- `'optionSelection'`\n- `'templateSelection'`\n- `TemplateRef` (from html attribute `templateSelection`)\n- `'id'` (from item data `templateId`)\n- `'option'`\n- `'template'`\n- `TemplateRef` (from html attribute `templates`)\n- Default render\n\n### Overlay\n\nIf the overlay mode is used / activated, add to the project root in CSS (with `ViewEncapsulation.None`)\n\n```css\n@import '~@angular/cdk/overlay-prebuilt.css';\n```\n\n## CSS variables\n\nIt's possible to change different colors (and more) with CSS variables without having to modify them with `::ng-deep` or other CSS rules :\n\n```css\n:root {\n    /* size */\n    --select2-single-height: 28px;\n    --select2-multiple-height: 28px;\n\n    /* label */\n    --select2-label-text-color: #000;\n    --select2-required-color: red;\n\n    /* selection */\n    --select2-selection-border-radius: 4px;\n    --select2-selection-background: #fff;\n    --select2-selection-disabled-background: #eee;\n    --select2-selection-border-color: #aaa;\n    --select2-selection-focus-border-color: #000;\n    --select2-selection-text-color: #111;\n    --select2-selection-line-height: 28px;\n    --select2-selection-padding: 0 0 0 8px;\n\n    /* selection (multiple) */\n    --select2-selection-multiple-gap: 2px 5px;\n    --select2-selection-multiple-padding: 2px 5px;\n\n    /* selection: choice item (multiple) */\n    --select2-selection-choice-background: #e4e4e4;\n    --select2-selection-choice-text-color: #000;\n    --select2-selection-choice-border-color: #aaa;\n    --select2-selection-choice-close-color: #999;\n    --select2-selection-choice-hover-close-color: #333;\n\n    /* placeholder */\n    --select2-placeholder-color: #999;\n    --select2-placeholder-overflow: ellipsis;\n\n    /* no result message */\n    --select2-no-result-color: #888;\n    --select2-no-result-font-style: italic;\n\n    /* no result message */\n    --select2-too-much-result-color: #888;\n    --select2-too-much-result-style: italic;\n\n    /* reset */\n    --select2-reset-color: #999;\n\n    /* arrow */\n    --select2-arrow-color: #888;\n\n    /* dropdown panel */\n    --select2-dropdown-background: #fff;\n    --select2-dropdown-border-color: #aaa;\n    --select2-dropdown-above-border-bottom: none;\n    --select2-dropdown-above-border-bottom-left-radius: 0;\n    --select2-dropdown-above-border-bottom-right-radius: 0;\n    --select2-dropdown-below-border-top: none;\n    --select2-dropdown-below-border-top-left-radius: 0;\n    --select2-dropdown-below-border-top-right-radius: 0;\n\n    /* overlay */\n    --select2-overlay-backdrop: transparent;\n\n    /* search field */\n    --select2-search-border-color: #aaa;\n    --select2-search-background: #fff;\n    --select2-search-border-radius: 0px;\n\n    /* dropdown option */\n    --select2-option-text-color: #000;\n    --select2-option-disabled-text-color: #999;\n    --select2-option-disabled-background: transparent;\n    --select2-option-selected-text-color: #000;\n    --select2-option-selected-background: #ddd;\n    --select2-option-highlighted-text-color: #fff;\n    --select2-option-highlighted-background: #5897fb;\n    --select2-option-group-text-color: gray;\n    --select2-option-group-background: transparent;\n    --select2-option-padding: 6px;\n\n    /* hint */\n    --select2-hint-text-color: #888;\n\n    /* for Material ------------------------------------------*/\n    --select2-material-underline: #ddd;\n    --select2-material-underline-active: #5a419e;\n    --select2-material-underline-disabled: linear-gradient(\n        to right,\n        rgba(0, 0, 0, 0.26) 0,\n        rgba(0, 0, 0, 0.26) 33%,\n        transparent 0\n    );\n    --select2-material-underline-invalid: red;\n    --select2-material-placeholder-color: rgba(0, 0, 0, 0.38);\n    --select2-material-selection-background: #ddd;\n    --select2-material-option-selected-background: rgba(0, 0, 0, 0.04);\n    --select2-material-option-highlighted-text-color: #000;\n    --select2-material-option-selected-text-color: #ff5722;\n}\n```\n\n## Publishing the library\n\n```\nnpm run build:lib\nnpm run publish:lib\n```\n\n## Update Demo\n\n```\nnpm run build:demo\n```\n\n## License\n\nLike Angular, this module is released under the permissive MIT license. Your contributions are always welcome.\n","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Dec 25, 2024](/content/2024/12/25/README.md)","Form Controls"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHarvest-Dev%2Fng-select2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHarvest-Dev%2Fng-select2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHarvest-Dev%2Fng-select2/lists"}