{"id":16183092,"url":"https://github.com/raphaelm-sudo/ngx-simple-select","last_synced_at":"2026-01-28T04:07:22.027Z","repository":{"id":36523183,"uuid":"216556896","full_name":"raphaelM-sudo/ngx-simple-select","owner":"raphaelM-sudo","description":"Simple and lightweight, yet customizable select module for Angular","archived":false,"fork":false,"pushed_at":"2023-05-07T02:03:18.000Z","size":1478,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-09T21:18:52.053Z","etag":null,"topics":["angular","dropdown","ngx","option","select"],"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/raphaelM-sudo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-21T11:58:53.000Z","updated_at":"2021-02-13T09:34:30.000Z","dependencies_parsed_at":"2024-10-27T19:37:59.603Z","dependency_job_id":null,"html_url":"https://github.com/raphaelM-sudo/ngx-simple-select","commit_stats":{"total_commits":50,"total_committers":2,"mean_commits":25.0,"dds":"0.040000000000000036","last_synced_commit":"0b941204fb6d368801e30f178cca420924ec540f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphaelM-sudo%2Fngx-simple-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphaelM-sudo%2Fngx-simple-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphaelM-sudo%2Fngx-simple-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphaelM-sudo%2Fngx-simple-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphaelM-sudo","download_url":"https://codeload.github.com/raphaelM-sudo/ngx-simple-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246811207,"owners_count":20837745,"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","dropdown","ngx","option","select"],"created_at":"2024-10-10T06:44:53.116Z","updated_at":"2026-01-28T04:07:21.985Z","avatar_url":"https://github.com/raphaelM-sudo.png","language":"TypeScript","readme":"# Ngx Simple Select\n\nSimple and lightweight, yet customizable select module for Angular.\n\n[Demo](https://ngx-simple-select.netlify.com/)\n\nThe main goal of this module is to be able to style select controls.\n\nStandard HTML select controls sadly can't be styled among all browsers.\n\nThis module is fully replicating the behaviour of Chrome regarding select controls with some added features e.g. scrolling overflowing options sideways, left to right and right to left support on all major browsers (even Edge which does not support the dir attribute yet), mobile and tablet representaion of the list, etc.\n\nThe usage is almost the same as if you would use regular HTML select and option tags.\n\nIt fully supports template driven forms.\n\nYou are not restricted to use one Map or Array only, as your data source and can even insert HTML into options while maintaining search functionality.\n\n## Installation\n\nNote: Ngx Simple Select requires Angular 8 or above.\nNgx Simple Select 2.0.0 requires Angular 9.\n\n```sh\nnpm install @nutrify/ngx-simple-select --save\n```\n\nYou might also need to install @angular/cdk:\n\n```sh\nnpm install @angular/cdk --save\n```\n\nFor styling import @nutrify/ngx-simple-select/scss/styles.scss or @nutrify/ngx-simple-select/css/styles.css\n\n## Usage\n\n**app.module.ts:**\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { SimpleSelectModule } from '@nutrify/ngx-simple-select';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    SimpleSelectModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n**component.ts:**\n\n```typescript\n// ...\n\nexport class Component {\n  countryID = 'AD';\n}\n```\n\n**component.html:**\n\n```html\n\u003c!-- ... --\u003e\n\n\u003csimple-select [(ngModel)]=\"countryID\" placeholder=\"Country\"\u003e\n    \u003csimple-option value=\"AF\"\u003eAfghanistan\u003c/simple-option\u003e\n    \u003csimple-option value=\"AL\"\u003eAlbania\u003c/simple-option\u003e\n    \u003csimple-option value=\"DZ\"\u003eAlgeria\u003c/simple-option\u003e\n    \u003csimple-option value=\"AS\"\u003eAmerican Samoa\u003c/simple-option\u003e\n    \u003csimple-option value=\"AD\"\u003eAndorra\u003c/simple-option\u003e\n    \u003c!-- ... --\u003e\n\u003c/simple-select\u003e\n\n\u003c!-- ... --\u003e\n```\n\nCheck out the [source code](https://github.com/raphaelM-sudo/ngx-simple-select/tree/master/src/app) for an example.\n\n#### Select\n\n##### Inputs\n\n| Property    | Default | Description                                                                                                |\n| ----------- | ------- | ---------------------------------------------------------------------------------------------------------- |\n| placeholder |         | Optional placeholder string, which gets displayed when no option is selected                               |\n| value       |         | Value of selected option                                                                                   |\n| hoverBorder | `false` | Boolean describing whether or not the border should only render on hover                                   |\n| animate     | `true`  | Boolean describing whether or not the arrow icon should show an animation                                  |\n| dir         |         | Optional direction property describing the content's text orientation. Can be:  `'ltr' \\| 'rtl' \\| 'auto'` |\n\n##### Directives\n\n| Property | Description                                        |\n| -------- | -------------------------------------------------- |\n| disabled | Sets the disabled attribute for the select element |\n| required | Sets the required attribute for the select element |\n\n#### Option\n\n##### Inputs\n\n| Property | Default | Description                                                                                              |\n| -------- | ------- | -------------------------------------------------------------------------------------------------------- |\n| value    |         | Value of the option component                                                                            |\n| dir      |         | Optional direction property describing the option's text orientation. Can be: `'ltr' \\| 'rtl' \\| 'auto'` |\n\n##### Directives\n\n| Property | Description                                        |\n| -------- | -------------------------------------------------- |\n| disabled | Sets the disabled attribute for the option element |\n\n## Styling\n\nYou can use SCSS or CSS  for styling.\n\nJust import the stylesheet and apply changes to it.\n\nThe SCSS stylesheet is recommended since it exports more variables.\n\nIf you are not using SCSS for your Angular projects already, you really should.\n\n[The migration is very easy.](https://medium.com/@ngubanethabo.ambrose/migrate-from-css-to-scss-stylesheets-for-existing-angular-application-d61f8061f5b7)\n\n### CSS / SASS\n\n```scss\n@import '~@nutrify/ngx-simple-select/scss/styles';\n```\n\n### Angular\n\n**angular-cli.json:**\n\n```json\n\"styles\": [\n  \"styles.css\",\n\n  \"../node_modules/@nutrify/ngx-simple-select/css/styles.css\"\n]\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphaelm-sudo%2Fngx-simple-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphaelm-sudo%2Fngx-simple-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphaelm-sudo%2Fngx-simple-select/lists"}