Skip to content
This repository has been archived by the owner on Jan 23, 2024. It is now read-only.

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

Notifications You must be signed in to change notification settings

bikecoders/ngx-input-search

Repository files navigation

ngx-input-search

npm version NPM Licence

CircleCI

dependencies Status devDependencies Status

coverage reliability rating security rating scale rating

Quality Gate Sonar Cloud

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
<input type="text" (ngxInputSearch)="doTheSearch($event)"/>

How to use it

dummy.component.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

<label for="search-box"> Search Input </label>
<input id="search-box" type="text" (ngxInputSearch)="doTheSearch($event)"/>

<br>

<span> The search box triggers -> {{ stringEmitted }} </span>

Demo

demo gif

Getting started

  1. Install ngx-input-search:
# using npm
npm install ngx-input-search --save

# using yarn <3
yarn add ngx-input-search
  1. Import the installed library:
import { InputSearchModule } from 'ngx-input-search';

@NgModule({
  ...
  imports: [
    ...
    InputSearchModule
  ]
})
export class AppModule { }
  1. Use it in your component
@Component({
  selector: 'dummy-component',
  template: `
    <input type="text" (ngxInputSearch)="doTheSearch($event)"/>
  `,
})
class DummyComponent {
  doTheSearch($event: Event) {
    const stringEmitted = ($event.target as HTMLInputElement).value;
    // Your request...
  }
}

Properties

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 property stringLength. The event contains the current criteria.
@Output() emptyInput: EventEmitted<void> 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.