{"id":15062141,"url":"https://github.com/ozonix/ox-select","last_synced_at":"2026-02-23T16:34:59.527Z","repository":{"id":57317269,"uuid":"115715283","full_name":"Ozonix/ox-select","owner":"Ozonix","description":null,"archived":false,"fork":false,"pushed_at":"2018-01-01T19:44:19.000Z","size":303,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T12:14:42.974Z","etag":null,"topics":["angular","angular-cli","angular2","angular4","angular5","filter","multiselect","reactive-forms"],"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/Ozonix.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":"2017-12-29T11:02:02.000Z","updated_at":"2018-03-09T08:51:27.000Z","dependencies_parsed_at":"2022-08-25T20:40:50.614Z","dependency_job_id":null,"html_url":"https://github.com/Ozonix/ox-select","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ozonix%2Fox-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ozonix%2Fox-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ozonix%2Fox-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ozonix%2Fox-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ozonix","download_url":"https://codeload.github.com/Ozonix/ox-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725633,"owners_count":20337670,"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":["angular","angular-cli","angular2","angular4","angular5","filter","multiselect","reactive-forms"],"created_at":"2024-09-24T23:31:00.598Z","updated_at":"2025-10-30T06:38:17.961Z","avatar_url":"https://github.com/Ozonix.png","language":"TypeScript","readme":"# ox-select. Smart select for Angular 4+\n\n\n\u003e Custom multiselect with filter for ReactiveForms and simple using\n\u003e\n\u003e Кастомный мультиселект с фильтром для реактивных форм и обычного использования\n\n\n![alt text](src/assets/select_1.jpg)\n\n![alt text](src/assets/select_2.jpg)\n\n## Install/Установка\n\n```\nnpm install ox-select\n```\n\n**For icons install font-awesome or ionic icons pack**  \n**Для работы иконок установите font-awesome или ionic пакеты**  \n\n```\nnpm install font-awesome --save\n\n...//angular-cli.json\n\"apps\": [\n          {\n             \"root\": \"src\",\n             \"outDir\": \"dist\",\n             ....\n             \"styles\": [\n                \"styles.css\",\n                \"../node_modules/font-awesome/css/font-awesome.css\"\n             ],\n             ...\n         }\n       ]\n\n],\n...\n```\n\n## Using/Использование\n\nimport module where will you use select:  \nДобавьте модуль в ваш проект, там где будете использовать select:  \n\n```\nimport { OxSelectModule } from 'ox-select';\n\n...\n\n@NgModule({\n  imports: [\n    \n    ...\n    OxSelectModule\n  ],\n\n...\n```\n\n\u003e If you have error:\n\u003e Если имеется ошибка:\n\u003e \u003e Module not found: Error...\n\u003e add link to index.ts file of OxSelectModule\n\u003e Добавьте ссылку до index.ts файла модуля OxSelectModule\n\n\n```//tsconfig.json\n{\n  \"compileOnSave\": false,\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"moduleResolution\": \"node\",\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"target\": \"es5\",\n    \"typeRoots\": [\n      \"node_modules/@types\"\n    ],\n    \"lib\": [\n      \"es2017\",\n      \"dom\"\n    ]\n  },\n  \"include\": [\n    \"src/**/*\",\n    \"node_modules/ox-select/index.ts\"\n  ]\n}\n```\n\nAdd tag \u003cox-select\u003e with any attributs your need into html-template (all attributes not required)  \nДобавьте тэг \u003cox-select\u003e с любыми требуемыми для Вас аттрибутами (все атрибуты необязательные)  \n\n\n```\n  \u003cox-select\n    [filterSelect]=\"true\"\n    [filterTitle]=\"'Search in list'\"\n    [multySelect]=\"true\"\n    [inputData]=\"items\"\n    [defaultData]=\"'No Items'\"\n    [headerTitle]=\"'Select any items'\"\n    [headerIcon]=\"'fa fa-thumbs-o-up'\"\n    [styleSelect]=\"{\n      margin: '0px 10px',\n      width: 'calc(100% - 20px)'\n    }\"\n    (outputData)=select($event, 'select-items')\u003e\n  \u003c/ox-select\u003e\n\n  or/или\n\n  \u003cox-select\n    [inputData]=\"[\n        {\n            input: 'check 1',\n            output: 1,\n            icon: 'fa fa-user-plus'\n        },\n        {\n            input: 'check 2',\n            output: 2,\n            alter: [\n                key: 'description',\n                value: 'not check it!'\n            ]\n        },\n        {\n            input: 'check 3',\n            output: 3,\n            selected: true\n        },\n        {\n            input: 'check 4'\n            output: 4,\n            disabled: true\n        }\n    ]\"\n    (outputData)=select($event, 'check-item')\u003e\n  \u003c/ox-select\u003e\n\n```\n\n\n-alter attr-  \n**filterSelect** - add filter for searching / Добавляет поле с поиском  \n**filterTitle** - text of filter / текст фильтра   \n**multySelect** - switch on multiselect mode / Включает режим с множественным выбором  \n**defaultData** - text when haven't options / Текст когда нет опций  \n**headerTitle** - text when have no selected options yet / Текст когда еще ничего не выбрано из списка опций  \n**headerIcon** - icon before headerTitle / иконка перед headerTitle  \n**styleSelect** - use like ngStyle for box of select / работает как ngStyle для вьюхи select  \n\n-main attr-  \n**inputData** - input data :) / Входящие данные  \n**outputData** - output data / Выходящие данные  \n\nInput data must be array of object by next style:  \nВходящие данные должны быть массивом объектов следующего вида:  \n\n```\nthis.method.selectUsers().subscribe(\n    res =\u003e {\n        this.items = res.map((select: any)=\u003e{\n            return {\n                input: select.name,\n                output: select.id,\n                icon: 'fa fa-user-o',\n                disabled: select._id == '5a46d2e0b0578201407595bb',\n                selected: select._id == '5a46d2e0b0578201407595bd',\n                alter: [\n                    {\n                    key: 'id',\n                    value: select.id\n                    }\n                ]\n            }\n        });\n    }, \n    error =\u003e {\n        console.log(error);\n    }\n);\n\n```\n\nwhere / где:  \n\n-required/обязательные-  \n\n**input** - like `\u003coption\u003eInput\u003c/option\u003e `/ как `\u003coption\u003eInput\u003c/option\u003e`  \n**output** - like value in `\u003coption value=\"output\"\u003e` / как value в `\u003coption value=\"output\"\u003e`  \n\n-additional/дополнительные-  \n\n**icon** - icon before input's text / иконка перед текстом input  \n**disabled** - like `\u003coption disabled\u003e` / как `\u003coption disabled\u003e`   \n**selected** - like `\u003coption selected\u003e` / как `\u003coption selected\u003e`   \n**alter** - one of more descriptions / одно или более описаний:  \n\n```\n...\nalter: [\n    {\n        key: 'id',\n        value: user.id\n    },\n    {\n        key: 'created',\n        value: user.created\n    },\n    {\n        key: 'age',\n        value: user.age\n    }\n]\n...\n```\n\nOutput data listen event of select and call shown method where $event is array  \nВыходные данные прослушиваются в outputData и вызывают указанный метод где $event - это массив   \n\nexample/ к примеру:  \n\n```\nprivate form: FormGroup = this.fb.group({\n    'check-item': '',\n    'select-items': ''\n});\n\nprivate select(data, name) {\n    this.form.get(name).setValue(data);\n}\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozonix%2Fox-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fozonix%2Fox-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozonix%2Fox-select/lists"}