- Notifications
You must be signed in to change notification settings - Fork0
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
License
bikecoders/ngx-input-search
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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
<inputtype="text"(ngxInputSearch)="doTheSearch($event)"/>
dummy.component.ts
@Component({selector:'dummy-component',templateUrl:'dummy.component.html',})classDummyComponent{doTheSearch($event:Event){conststringEmitted=($event.targetasHTMLInputElement).value;console.log(stringEmitted);}}
dummy.component.html
<labelfor="search-box"> Search Input</label><inputid="search-box"type="text"(ngxInputSearch)="doTheSearch($event)"/><br><span> The search box triggers -> {{ stringEmitted }}</span>
- online demo:https://bikecoders.github.io/ngx-input-search/
- demo-app: Source code available
- Install
ngx-input-search:
# using npmnpm install ngx-input-search --save# using yarn <3yarn add ngx-input-search
- Import the installed library:
import{InputSearchModule}from'ngx-input-search';@NgModule({ ...imports:[ ...InputSearchModule]})exportclassAppModule{}
- Use it in your component
@Component({selector:'dummy-component',template:` <input type="text" (ngxInputSearch)="doTheSearch($event)"/> `,})classDummyComponent{doTheSearch($event:Event){conststringEmitted=($event.targetasHTMLInputElement).value;// Your request...}}
| Name | Description |
|---|---|
@Output() ngxInputSearch: EventEmitted<Event> | 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<string> | Event emitted when the string written length is shorter than the minimum defined by the input propertystringLength. The event contains the current criteria. |
@Output() emptyInput: EventEmitted<void> | Event emitted when the input is empty. |
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.
About
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
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.