Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bikecoders/ngx-input-search
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
https://github.com/bikecoders/ngx-input-search
angular angular-lib angular-library continuous-integration input-search ngx npm search-criteria sonar-scanner sonarqube tdd unit-testing ux
Last synced: about 4 hours ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/bikecoders/ngx-input-search
- Owner: bikecoders
- License: mit
- Created: 2018-10-26T02:23:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-21T02:04:44.000Z (about 1 year ago)
- Last Synced: 2024-01-21T03:19:54.432Z (about 1 year ago)
- Topics: angular, angular-lib, angular-library, continuous-integration, input-search, ngx, npm, search-criteria, sonar-scanner, sonarqube, tdd, unit-testing, ux
- Language: TypeScript
- Homepage: https://bikecoders.github.io/ngx-input-search/
- Size: 2.05 MB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-input-search
[](https://badge.fury.io/js/ngx-input-search) 
[](https://circleci.com/gh/bikecoders/ngx-input-search/tree/master)
[](https://david-dm.org/bikecoders/ngx-input-search) [](https://david-dm.org/bikecoders/ngx-input-search?type=dev)
[](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search) [](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search) [](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search) [](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search)
[](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search) [](https://sonarcloud.io/dashboard?id=bikecoders_ngx-input-search)
## TL;DR:
Angular directive to put in your search inputs to improve the User Experience (UX).
With its only output you will be able to get what the user writes with good practices related to search inputs such as:
- Wait until the user stops writing to perform the desired action
- Avoid performing the action over the same stream
- Trim the white-spaces on the criteria
- Stream when the criteria's length is greater than the desired
```html
```
### How to use it
`dummy.component.ts`
```ts
@Component({
selector: 'dummy-component',
templateUrl: 'dummy.component.html',
})
class DummyComponent {
doTheSearch($event: Event) {
const stringEmitted = ($event.target as HTMLInputElement).value;
console.log(stringEmitted);
}
}
```
`dummy.component.html`
```html
Search Input
The search box triggers -> {{ stringEmitted }}
```
## Demo
- online demo: https://bikecoders.github.io/ngx-input-search/
- [demo-app](https://github.com/bikecoders/ngx-input-search/tree/master/src): Source code available
## Getting started
1. Install `ngx-input-search`:
```bash
# using npm
npm install ngx-input-search --save
# using yarn <3
yarn add ngx-input-search
```
2. Import the installed library:
```ts
import { InputSearchModule } from 'ngx-input-search';
@NgModule({
...
imports: [
...
InputSearchModule
]
})
export class AppModule { }
```
3. Use it in your component
```ts
@Component({
selector: 'dummy-component',
template: `
`,
})
class DummyComponent {
doTheSearch($event: Event) {
const stringEmitted = ($event.target as HTMLInputElement).value;
// Your request...
}
}
```
## Properties
| Name | Description |
| :----------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `@Output() ngxInputSearch: EventEmitted` | Event emitted when the user has entered the search criteria in the input element. |
| `@Input() debounceTime: number = 400` | Indicates how much time in ms it will wait for the users stops typing. By default is 400ms. |
| `@Input() stringLength: number = 0` | Indicates the minimum length that must have the string to be emitted. By default is 0. |
| `@Output() stringTooShort: EventEmitted` | Event emitted when the string written length is shorter than the minimum defined by the input property `stringLength`. The event contains the current criteria. |
| `@Output() emptyInput: EventEmitted` | Event emitted when the input is empty. |
## Why?
When 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.
With this directive we have the desired behavior.