{"id":17094045,"url":"https://github.com/Crazyht/ngx-tree-select","last_synced_at":"2026-05-27T11:30:20.035Z","repository":{"id":15381026,"uuid":"77859346","full_name":"Crazyht/ngx-tree-select","owner":"Crazyht","description":"Angular select component with tree items","archived":true,"fork":false,"pushed_at":"2022-12-10T15:45:16.000Z","size":2828,"stargazers_count":56,"open_issues_count":56,"forks_count":45,"subscribers_count":3,"default_branch":"dev","last_synced_at":"2024-11-16T09:21:09.068Z","etag":null,"topics":["angular4","library","ngx","select","treeview"],"latest_commit_sha":null,"homepage":"https://crazyht.github.io/ngx-tree-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/Crazyht.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-02T20:17:20.000Z","updated_at":"2024-06-05T17:59:01.000Z","dependencies_parsed_at":"2023-01-13T20:30:13.601Z","dependency_job_id":null,"html_url":"https://github.com/Crazyht/ngx-tree-select","commit_stats":null,"previous_names":["crazyht/crazy-select"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crazyht%2Fngx-tree-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crazyht%2Fngx-tree-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crazyht%2Fngx-tree-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Crazyht%2Fngx-tree-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Crazyht","download_url":"https://codeload.github.com/Crazyht/ngx-tree-select/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240109565,"owners_count":19749170,"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":["angular4","library","ngx","select","treeview"],"created_at":"2024-10-14T14:10:05.391Z","updated_at":"2026-05-27T11:30:19.993Z","avatar_url":"https://github.com/Crazyht.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ngx-tree-select\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/Crazyht/ngx-tree-select.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/Crazyht/ngx-tree-select.svg?branch=dev)](https://travis-ci.org/Crazyht/ngx-tree-select)\n[![npm version](https://badge.fury.io/js/ngx-tree-select.svg)](https://badge.fury.io/js/ngx-tree-select)\n## Features:\n- Dropdown with 'flat' items (Like normal select)\n- Dropdown with hierarchical items\n- Simple or multiple selected items\n- With hierarchical datas you can force child selection or allow select parent\n- ngModel \u0026 standard validation compliant\n- Can limit displayed selected items (... link allow your user to see entire selection)\n\n## Installation\n\nThis is how to install the components:\n\n```bash\nnpm install ngx-tree-select\n```\n\nor\n\n```bash\nyarn add ngx-tree-select\n```\n\nAnd on your application module:\n\n```ts\nimport {NgxTreeSelectModule} from 'ngx-tree-select';\n\n@NgModule({\n  declarations: [ ...],\n  imports: [\n    BrowserModule,\n    ....,\n    NgxTreeSelectModule.forRoot({\n      allowFilter: true,\n      filterPlaceholder: 'Type your filter here...',\n      maxVisibleItemCount: 5,\n      idField: 'id',\n      textField: 'name',\n      childrenField: 'children',\n      allowParentSelection: true\n    })\n],\n})\nexport class AppModule { }\n```\n\nSee below for SystemJs / UMD installation.\n\n# Default options\n\nWhen you call ```NgxTreeSelectModule.forRoot``` you must pass default options. This options can be empty object \"{}\" or you can add one or more settings :\n\n- **allowFilter** : display filter input on dropdown\n- **filterPlaceholder** : determine placeholder text for filter\n- **maxVisibleItemCount** : determine maximum number of items are displayed on multiple select\n- **idField** : determine which property of your items is used as unique identifier\n- **textField** : determine which property of your items is displayed\n- **childrenField** : determine which property of yours items contains children items\n- **allowParentSelection** : if set to **true**, you can select parent, else when you select parent all children are selected\n- **expandMode** : Define which item are expand at initilization. Possible value are : **None**, **Selection** or **All**\n\n# Using the Tree Select\n\nWe will need to add first a version of Font Awesome to our page, for example:\n\n```html\n\u003clink href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\" rel=\"stylesheet\"\u003e\n```\n\nThen we can use the Tree Select like this:\n\n```html\n\u003cform novalidate\u003e\n  \u003ctree-select name=\"simpleSelect\"\n              [items]=\"items\"\n              childrenField=\"children\"\n              [(ngModel)]=\"simpleSelected\"\n              required=true\n              #simpleSelect=\"ngModel\"\n              [filterPlaceholder]=\"FilterPlaceholder\"\n              [allowFilter]=\"ShowFilter\"\n              [disabled]=\"Disabled\"\n              [allowParentSelection]=\"AllowParentSelection\"\n              expandMode=\"all\"\u003e\u003c/tree-select\u003e\n  \u003cdiv *ngIf=\"simpleSelect.errors \u0026\u0026 (simpleSelect.dirty || simpleSelect.touched)\" class=\"alert alert-danger\"\u003e\n    \u003cdiv [hidden]=\"!simpleSelect.errors.required\"\u003eSimple select is required\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n\n\u003cform novalidate\u003e\n  \u003ctree-select name=\"multipleSelect\"\n              [items]=\"items\"\n              childrenField=\"children\"\n              [multiple]=\"true\"\n              [(ngModel)]=\"multipleSelected\"\n              filterPlaceholder=\"Type item filter...\"\n              required=true\n              minlength=\"2\"\n              maxlength=\"4\"\n              [allowParentSelection]=\"AllowParentSelection\"\n              #multipleSelect=\"ngModel\"\n              [filterPlaceholder]=\"FilterPlaceholder\"\n              [maxVisibleItemCount]=\"MaxDisplayed\"\n              [allowFilter]=\"ShowFilter\"\n              [disabled]=\"Disabled\"\u003e\n  \u003c/tree-select\u003e\n  \u003cdiv *ngIf=\"multipleSelect.errors \u0026\u0026 (multipleSelect.dirty || multipleSelect.touched)\" class=\"alert alert-danger\"\u003e\n    \u003cdiv [hidden]=\"!multipleSelect.errors.required\"\u003eMultiple select is required\u003c/div\u003e\n    \u003cdiv [hidden]=\"!multipleSelect.errors.minlength\"\u003eYou must choose at least 2 items on Multiple select\u003c/div\u003e\n    \u003cdiv [hidden]=\"!multipleSelect.errors.maxlength\"\u003eYou must choose maximum 4 items on Multiple select\u003c/div\u003e\n  \u003c/div\u003e\n```\n\n# Component attributes\n\nWhen you place **tree-select** on HTML template you can define :\n\n- **items** : list of items\n- **multiple** : allow multiple selection\n- **disabled** : disable component\n- **allowFilter** : display filter input on dropdown\n- **filterPlaceholder** : determine placeholder text for filter\n- **maxVisibleItemCount** : determine maximum number of items are displayed on multiple select\n- **idField** : determine which property of your items is used as unique identifier\n- **textField** : determine which property of your items is displayed\n- **childrenField** : determine which property of yours items contains children items\n- **allowParentSelection** : if set to **true**, you can select parent, else when you select parent all children are selected\n- **expandMode** : Define which item are expand at initilization. Possible value are : **None**, **Selection** or **All**\n\n**tree-select** component use default options define when you call ```NgxTreeSelectModule.forRoot``` except if you override it with attribute on HTML template.\n\n# Running the Demo Application\nThis command will build and start the demo application:\n\n```bash\nnpm start\n```\n\n# Running This Module In Development\n\nFirst let's build the library using this command:\n\n```bash\nnpm run lib:build\n```\n\n\nThen let's link it:\n\n```bash\ncd dist_package\\ngx-tree-select\nnpm link\n```\n\n\nOn another folder on the same machine where we have for example a running Angular CLI, we then do:\n\n```bash\nnpm link ngx-tree-select\n```\n\n\n# Running the Tests\n\nThe tests can be executed with the following commands:\n\n```bash\nnpm run test\nnpm run e2e\n```\n\n## Using SystemJs via the UMD bundle ?\n\nMake sure to add this to your `map` configuration, if you need the module served from a CDN:\n\n```javascript\nmap: {\n\n   ...\n   'ngx-tree-select': 'https://unpkg.com/ngx-tree-select@\u003cversion number\u003e/ngx-tree-select.rollup.umd.min.js'\n}\n```\n\nOtherwise if serving from `node_modules`directly:\n\n```javascript\nmap: {\n   ...\n   'ngx-tree-select': 'node_modules/ngx-tree-select/bundles/ngx-tree-select.umd.min.js'\n}\n```\n\nAnd in our packages property:\n\n```javascript\npackages: {\n   ...\n  'ngx-tree-select': {\n    main: 'index.js',\n    defaultExtension: 'js'\n  }\n\n}\n```\n\n\n# License\n\n[MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCrazyht%2Fngx-tree-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCrazyht%2Fngx-tree-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCrazyht%2Fngx-tree-select/lists"}