{"id":24984324,"url":"https://github.com/bikecoders/ngx-input-search","last_synced_at":"2025-10-19T09:30:35.902Z","repository":{"id":33197132,"uuid":"154765197","full_name":"bikecoders/ngx-input-search","owner":"bikecoders","description":"Angular directive to put in your search inputs to improve the UX. With its only output you will be able to get what the user writes with all good practices related to search input","archived":false,"fork":false,"pushed_at":"2024-01-21T02:04:44.000Z","size":2149,"stargazers_count":8,"open_issues_count":49,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-01-21T03:19:54.432Z","etag":null,"topics":["angular","angular-lib","angular-library","continuous-integration","input-search","ngx","npm","search-criteria","sonar-scanner","sonarqube","tdd","unit-testing","ux"],"latest_commit_sha":null,"homepage":"https://bikecoders.github.io/ngx-input-search/","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/bikecoders.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}},"created_at":"2018-10-26T02:23:21.000Z","updated_at":"2024-01-21T03:19:56.896Z","dependencies_parsed_at":"2024-01-09T20:00:15.466Z","dependency_job_id":"5fc23be4-f0b1-440b-a434-12cb9face086","html_url":"https://github.com/bikecoders/ngx-input-search","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bikecoders%2Fngx-input-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bikecoders%2Fngx-input-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bikecoders%2Fngx-input-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bikecoders%2Fngx-input-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bikecoders","download_url":"https://codeload.github.com/bikecoders/ngx-input-search/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237096136,"owners_count":19254738,"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-lib","angular-library","continuous-integration","input-search","ngx","npm","search-criteria","sonar-scanner","sonarqube","tdd","unit-testing","ux"],"created_at":"2025-02-04T09:48:20.808Z","updated_at":"2025-10-19T09:30:30.577Z","avatar_url":"https://github.com/bikecoders.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-input-search\n\n[![npm version](https://badge.fury.io/js/ngx-input-search.svg)](https://badge.fury.io/js/ngx-input-search) ![NPM Licence](https://img.shields.io/npm/l/ngx-input-search?color=blue)\n\n[![CircleCI](https://circleci.com/gh/bikecoders/ngx-input-search/tree/master.svg?style=svg)](https://circleci.com/gh/bikecoders/ngx-input-search/tree/master)\n\n[![dependencies Status](https://david-dm.org/bikecoders/ngx-input-search/status.svg)](https://david-dm.org/bikecoders/ngx-input-search) [![devDependencies Status](https://david-dm.org/bikecoders/ngx-input-search/dev-status.svg)](https://david-dm.org/bikecoders/ngx-input-search?type=dev)\n\n[![coverage](https://sonarcloud.io/api/project_badges/measure?project=bikecoders_ngx-input-search\u0026metric=coverage)](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search) [![reliability rating](https://sonarcloud.io/api/project_badges/measure?project=bikecoders_ngx-input-search\u0026metric=reliability_rating)](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search) [![security rating](https://sonarcloud.io/api/project_badges/measure?project=bikecoders_ngx-input-search\u0026metric=security_rating)](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search) [![scale rating](https://sonarcloud.io/api/project_badges/measure?project=bikecoders_ngx-input-search\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search)\n\n[![Quality Gate](https://sonarcloud.io/api/project_badges/quality_gate?project=bikecoders_ngx-input-search)](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search)  [![Sonar Cloud](https://sonarcloud.io/images/project_badges/sonarcloud-white.svg)](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search)\n\n## TL;DR:\n\nAngular directive to put in your search inputs to improve the User Experience (UX).\nWith its only output you will be able to get what the user writes with good practices related to search inputs such as:\n\n- Wait until the user stops writing to perform the desired action\n- Avoid performing the action over the same stream\n- Trim the white-spaces on the criteria\n- Stream when the criteria's length is greater than the desired\n\n\n```html\n\u003cinput type=\"text\" (ngxInputSearch)=\"doTheSearch($event)\"/\u003e\n```\n\n\n### How to use it\n`dummy.component.ts`\n```ts\n@Component({\n  selector: 'dummy-component',\n  templateUrl: 'dummy.component.html',\n})\nclass DummyComponent {\n\n  doTheSearch($event: Event) {\n    const stringEmitted = ($event.target as HTMLInputElement).value;\n    console.log(stringEmitted);\n  }\n}\n```\n\n\n`dummy.component.html`\n```html\n\u003clabel for=\"search-box\"\u003e Search Input \u003c/label\u003e\n\u003cinput id=\"search-box\" type=\"text\" (ngxInputSearch)=\"doTheSearch($event)\"/\u003e\n\n\u003cbr\u003e\n\n\u003cspan\u003e The search box triggers -\u003e {{ stringEmitted }} \u003c/span\u003e\n```\n\n## Demo\n- online demo: https://bikecoders.github.io/ngx-input-search/\n- [demo-app](https://github.com/bikecoders/ngx-input-search/tree/master/src): Source code available\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"docs/images/demo.gif\" alt=\"demo gif\"\u003e\n\u003c/p\u003e\n\n## Getting started\n\n1. Install `ngx-input-search`:\n\n```bash\n# using npm\nnpm install ngx-input-search --save\n\n# using yarn \u003c3\nyarn add ngx-input-search\n```\n\n2. Import the installed library:\n\n```ts\nimport { InputSearchModule } from 'ngx-input-search';\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    InputSearchModule\n  ]\n})\nexport class AppModule { }\n```\n\n3. Use it in your component\n\n```ts\n@Component({\n  selector: 'dummy-component',\n  template: `\n    \u003cinput type=\"text\" (ngxInputSearch)=\"doTheSearch($event)\"/\u003e\n  `,\n})\nclass DummyComponent {\n  doTheSearch($event: Event) {\n    const stringEmitted = ($event.target as HTMLInputElement).value;\n    // Your request...\n  }\n}\n```\n\n## Properties\n\n| Name                                             | Description                                                                                                                                                     |\n| :----------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `@Output() ngxInputSearch: EventEmitted\u003cEvent\u003e`  | Event emitted when the user has entered the search criteria in the input element.                                                                               |\n| `@Input() debounceTime: number = 400`            | Indicates how much time in ms it will wait for the users stops typing. By default is 400ms.                                                                     |\n| `@Input() stringLength: number = 0`              | Indicates the minimum length that must have the string to be emitted. By default is 0.                                                                          |\n| `@Output() stringTooShort: EventEmitted\u003cstring\u003e` | Event emitted when the string written length is shorter than the minimum defined by the input property `stringLength`. The event contains the current criteria. |\n| `@Output() emptyInput: EventEmitted\u003cvoid\u003e`       | Event emitted when the input is empty.                                                                                                                          |\n\n\n## Why?\n\nWhen we want to implement a search input we usually want to wait until the user stops writing to make the request and also check if the search criteria is different than the last one to avoid making the same request right away.\n\nWith this directive we have the desired behavior.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbikecoders%2Fngx-input-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbikecoders%2Fngx-input-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbikecoders%2Fngx-input-search/lists"}