{"id":21953745,"url":"https://github.com/ngx-dummy/select-simple","last_synced_at":"2026-04-05T20:34:49.768Z","repository":{"id":57130771,"uuid":"425059252","full_name":"ngx-dummy/select-simple","owner":"ngx-dummy","description":"A simple select (dropdown) component to use in Angular / Ionic projects ","archived":false,"fork":false,"pushed_at":"2022-12-29T15:35:41.000Z","size":6702,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T12:16:41.818Z","etag":null,"topics":["angular","angular11-component","component-library","dropdown","ionic","javascript","options","select","select-component","typescript","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://ngx-dummy.github.io/select-simple/","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/ngx-dummy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["VovanSuper"],"patreon":"vovansuper","open_collective":null,"ko_fi":"vovansuper","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/ovsyukov"]}},"created_at":"2021-11-05T19:14:38.000Z","updated_at":"2022-11-08T14:58:11.000Z","dependencies_parsed_at":"2023-01-31T09:16:01.188Z","dependency_job_id":null,"html_url":"https://github.com/ngx-dummy/select-simple","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-dummy%2Fselect-simple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-dummy%2Fselect-simple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-dummy%2Fselect-simple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-dummy%2Fselect-simple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngx-dummy","download_url":"https://codeload.github.com/ngx-dummy/select-simple/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245001505,"owners_count":20545262,"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","angular11-component","component-library","dropdown","ionic","javascript","options","select","select-component","typescript","ui","ui-components"],"created_at":"2024-11-29T07:12:35.129Z","updated_at":"2025-12-30T23:45:07.398Z","avatar_url":"https://github.com/ngx-dummy.png","language":"TypeScript","funding_links":["https://github.com/sponsors/VovanSuper","https://patreon.com/vovansuper","https://ko-fi.com/vovansuper","https://www.paypal.me/ovsyukov","https://paypal.me/ovsyukov","https://www.buymeacoffee.com/vovan_super"],"categories":[],"sub_categories":[],"readme":"\u003ccenter\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@ngx-dummy/select-simple\" target=\"_blank\"\u003e\n    \u003cp align=\"center\"\u003e\n      \u003cimg src=\"https://avatars3.githubusercontent.com/u/62136587?s=400\u0026u=4580be0183d1496d982253d3a0d803de82465626\u0026v=4\" width=\"200\" height=\"200\" /\u003e\n    \u003c/p\u003e\n  \u003c/a\u003e\n  \u003ch2 align=\"center\"\u003e\u003cb style=\"color: teal;\"\u003e\u003ca href=\"https://www.npmjs.com/package/@ngx-dummy/select-simple\" target=\"_blank\"\u003e@Ngx-dummy/Select-simple\u003c/a\u003e\u003c/b\u003e \u003ci\u003elibrary\u003c/i\u003e\u003c/h2\u003e\n\n\u003cbr /\u003e\n\n[![npm version](https://flat.badgen.net/npm/v/@ngx-dummy/select-simple?scale=1.5\u0026color=f11\u0026labelColor=F62\u0026label=latest%20version\u0026icon=npm)](https://www.npmjs.com/package/@ngx-dummy/select-simple)\n\n\u003c/center\u003e\n\n---\n\n\n[![GitHub license](https://img.shields.io/github/license/ngx-dummy/select-simple?style=flat-square)](https://github.com/ngx-dummy/select-simple/blob/main/LICENSE)\n\n[![GitHub issues](https://img.shields.io/github/issues/ngx-dummy/select-simple?style=flat-square)](https://github.com/ngx-dummy/select-simple/issues)\n[![GitHub forks](https://img.shields.io/github/forks/ngx-dummy/select-simple?style=flat-square)](https://github.com/ngx-dummy/select-simple/network)\n[![GitHub stars](https://img.shields.io/github/stars/ngx-dummy/select-simple?style=flat-square)](https://github.com/ngx-dummy/select-simple/stargazers)\n[![GitHub Release](https://flat.badgen.net/github/release/ngx-dummy/select-simple)](https://github.com/ngx-dummy/select-simple/releases)\n[![GitHub Branches](https://flat.badgen.net/github/branches/ngx-dummy/select-simple)](https://github.com/ngx-dummy/select-simple/branches)\n[![GitHub Tags](https://flat.badgen.net/github/tags/ngx-dummy/select-simple)](https://github.com/ngx-dummy/select-simple/tags)\n[![GitHub Issues](https://flat.badgen.net/github/issues/ngx-dummy/select-simple)](https://github.com/ngx-dummy/select-simple/issues)\n[![GitHub Forks](https://flat.badgen.net/github/forks/ngx-dummy/select-simple)](https://github.com/ngx-dummy/select-simple/network/members)\n[![GitHub Status](https://flat.badgen.net/github/status/ngx-dummy/select-simple)](https://github.com/ngx-dummy/select-simple/network/members)\n[![publish size](https://flat.badgen.net/packagephobia/publish/@ngx-dummy/select-simple)](https://bundlephobia.com/package/@ngx-dummy/select-simple)\n[![min size](https://flat.badgen.net/bundlephobia/min/@ngx-dummy/select-simple)](https://bundlephobia.com/package/@ngx-dummy/select-simple)\n[![minzip size](https://flat.badgen.net/bundlephobia/minzip/@ngx-dummy/select-simple)](https://bundlephobia.com/package/@ngx-dummy/select-simple)\n[![Npm downloads](https://flat.badgen.net/npm/dt/@ngx-dummy/select-simple)](https://www.npmjs.com/package/@ngx-dummy/select-simple)\n[![Npm monthly downloads](https://flat.badgen.net/npm/dm/@ngx-dummy/select-simple)](https://www.npmjs.com/package/@ngx-dummy/select-simple)\n[![](https://data.jsdelivr.com/v1/package/npm/@ngx-dummy/select-simple/badge?style=flat-square)](https://www.jsdelivr.com/package/npm/@ngx-dummy/select-simple)\n[![Twitter Follow](https://img.shields.io/twitter/follow/OvsyukovV.svg?style=flat-square\u0026logo=twitter)](https://twitter.com/OvsyukovV)\n[![Donations](https://img.shields.io/badge/Donate-PayPal-green.svg?style=flat-square)](https://paypal.me/ovsyukov)\n\n---\n\n[![npm-deploy](https://github.com/ngx-dummy/select-simple/actions/workflows/npm-deploy.yml/badge.svg?style=flat)](https://github.com/ngx-dummy/select-simple/actions/workflows/npm-deploy.yml)\n\n\n[ngx-dummy.github.io/select-simple/](ngx-dummy.github.io/select-simple/)\n\n\n## Features\n\nThis is an \"Angular version\" of html [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)  (which could hardly be styled / templated ... hence the library)\n\n- :gear: **Completely customizable:** you can change the colors, styles ...\n\n- :pencil2: **Create your own templates:** create your own Options' templates\n\n- :ok_hand: **You can use right away:** there are basic items styles included\n\n- :rocket: **No extra deps:** depends only on `@angular/core / @angular/common`\n\n- :satellite: **Options' Elements object bindings** data-bind `Option`s to **_string_** of complex objects\n\n\n\u003cbr/\u003e\n\n## Install\n\n### Yarn\n\n```bash\nyarn add @ngx-dummy/select-simple\n```\n\n\u003cdetails closed\u003e\n\u003csummary\u003eWith Npm\u003c/summary\u003e\n\n```bash\nnpm install -save @ngx-dummy/select-simple@0.0.5-v9\n```\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n## Usage\n\n### See the sample app setup [Stackblitz](https://stackblitz.com/edit/ngx-dummyselect-simple-tester?file=src/app/app.component.html)\n\n[![Using @ngx-dummy/select-simple](https://user-images.githubusercontent.com/969302/140906480-cc2b597d-7ac2-4c12-b752-61b8ba1c704b.png)](https://stackblitz.com/edit/ngx-dummyselect-simple-tester?file=src/app/app.component.html)\n\n\u003cbr /\u003e\n\n### samples\n\n```ts\nimport { SelectSimpleModule } from '@ngx-dummy/select-simple';\n\n@NgModule({\n\timports: [SelectSimpleModule],\n})\nexport class AppModule {}\n```\n\n#### with `Options` (Array of Strings) binding:\n\n```html\n\u003cngxd-select id=\"select1\" [options]=\"options\" [readonly]=\"false\" [required]=\"true\" [resetBtn]=\"true\" formControlName=\"selector\" placeholder=\"Select a City\"\u003e\u003c/ngxd-select\u003e\n```\n\n```ts\n//... options as simple strings\noptions = ['opt1', 'opt2', 'opt2'];\n//...\n```\n\n\u003cbr /\u003e\n\n#### with `Options` (Array of Objects) and `optionLabelKey` (for resolving every options' caption) binding:\n\n```html\n\u003cngxd-select id=\"select1\" [options]=\"options\" [readonly]=\"false\" [required]=\"true\" [resetBtn]=\"true\" formControlName=\"selector\" placeholder=\"Select a City\" optionLabelKey=\"name\"\u003e\u003c/ngxd-select\u003e\n```\n\n```ts\n//... Select-items's Captions resolved by `optionLabelKey` param (could be simple name of property key or, in case of nested property, dot-separated, ie, `value.para1` )\noptions = [{ name: 'opt1' , value: { param1: 'para1', param2: 'para2' } }, { name: 'opt2' , value: { param1: 'para1', param2: 'para2' } },];\n//...\n```\n\n\u003cbr /\u003e\n\n#### and `Option` are projected (content projection \\ transclusion):\n\n```html\n\u003cngxd-select id=\"select1\" [options]=\"options\" [readonly]=\"false\" [required]=\"true\" [resetBtn]=\"true\" formControlName=\"selector\" placeholder=\"Select a City\" optionLabelKey=\"name\"\u003e\n\t\u003cngxd-select-item [label]=\"'Option 1'\" [option]=\"'Opt1'\" (onClick)=\"selected = $event\"\u003e\u003c/ngxd-select-item\u003e\n\t\u003cngxd-select-item [label]=\"'Option 2'\" [option]=\"'Opt2'\" (onClick)=\"selected = $event\"\u003e\u003c/ngxd-select-item\u003e\n\u003c/ngxd-select\u003e\n```\n\n```ts\n//...\nselected = undefined;\n//...\n```\n\n\u003cbr /\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eMore detailed showcase (the video clip demonstrates most of use cases of the library)\u003c/summary\u003e\n\n\u003ccenter\u003e\n\n[![Using @ngx-dummy/select-simple](https://raw.githubusercontent.com/ngx-dummy/select-simple/v9/docs/Select-simple-usage.png)](https://vimeo.com/579375725/749b80e96c)\n\n\u003c/center\u003e\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Versioning\n\nsupports Angular 11 - 13.\n\n \u003cdetails\u003e\n \u003csummary\u003e-*v9\u003c/summary\u003e\n`@ngx-dummy/select-simple` versioned `*-v9` supports Angular 9 - 11.\n \u003c/details\u003e\n\n\u003cbr /\u003e\n\n## Browser Support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eEdge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                                   | Edge versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           |\n\n\u003cbr /\u003e\n\n## To support my work, maybe ..👏 🍭 :\n\n\u003ca href=\"https://www.buymeacoffee.com/vovan_super\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-green.png\" alt=\"Buy Me A Coffee\" height=\"40\" width=\"140\" style=\"border-radius: 5px;\"\u003e\u003c/a\u003e\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n\u003cdetails closed\u003e\n\u003csummary\u003eOther projects:\u003c/summary\u003e\n\n|     Name      |                    URL                     |\n| :-----------: | :----------------------------------------: |\n| **Accordion Simple** | *https://www.npmjs.com/package/@ngx-dummy/accordion-simple* |\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr /\u003e\n\n#### Usage\n\nLicensed under\n[![GitHub license](https://img.shields.io/github/license/ngx-dummy/select-simple)](https://github.com/ngx-dummy/select-simple/blob/main/LICENSE)\n\nLicensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\\_Copyright (c) belongs to Vladimir Ovsyukov \u003c\u003covsyukov@yandex.com\u003e\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-dummy%2Fselect-simple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngx-dummy%2Fselect-simple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-dummy%2Fselect-simple/lists"}