Ngx-sand-typeahead NPM

Demo

npm.io

Features

Type and search at the same time
Limit number of items displayed in dropdown
Option to choose default template for ui or fully end user customization
Optional second and third parameter to display
Angular form support
Built in filter functionality
Easy to customize
Plug and play feature

Getting Started

Step 1 : Install the package

NPM

npm install ngx-sand-typeahead

Step 2 : After installation import SelectDropDownModule into your root or feature module

import { SandTypeaheadModule } from 'sand-typeahead';

Step 3 : Add `SandTypeaheadModule` to the imports of your NgModule

@NgModule({
  imports: [
    ...,
    SandTypeaheadModule
  ],
  ...
})
class YourModule { ... }

Usage

Use <ngx-sand-typeahead></ngx-sand-typeahead> in your templates to add the default dropdown in your view like below

  <ngx-sand-typeahead 
   (searchChange)="onSearch($event)" 
   (valueSelect)="onSelect($event)" 
   (blurInput)="onBlur($event)"
   (clickInput)="onClick($event)" 
   [disabled]="disabled" 
   [options]="dropdowndata" 
   [settings]="settings">
  </ngx-sand-typeahead>

For custom dropdown in your view pass [itemTemplate]="yourDropdownTemplate" and [notFoundTemplate]="yourNotFoundTemplate" as inputs

<ngx-sand-typeahead 
 (searchChange)="onSearch($event)"
 (valueSelect)="onSelect($event)"
 (blurInput)="onBlur($event)" 
 (clickInput)="onClick($event)"
 [disabled]="disabled" 
 [options]="dropdowndata" 
 [settings]="settings"   
 [itemTemplate]="yourDropdownTemplate" 
 [notFoundTemplate]="yourNotFoundTemplate">
</ngx-sand-typeahead>

<ng-template #yourDropdownTemplate let-item let-i="index">
  <a [innerHTML]="item.name"></a>
</ng-template>

<ng-template #yourNotFoundTemplate let-noDataText >
  <a [innerHTML]="noDataText"></a>
</ng-template>

Goto Top

API

Input

options:Array - Array of objects that are to be the dropdown options.
settings:Object - Settings object to change the default configurations.
formControlName - Tracks the FormControl instance bound to the directive. Used with Reactive forms
[(ngModel)] - Tracks the value bound to this directive. Used with Template-driven forms

  settings = {
      inputDirection: 'ltr',
      displayKey: 'name',
      placeholder: 'Input here',
      height: 300,
      limit: 0,
      subtitleEnabled: false,
      subTitleKey: '',
      minorTitleEnabled: false,
      minorTitleKey: '',
      heading: '',
      noDataText:'No data found'
  };

Property	Purpose	Type	Default value	Mandatory
displayKey	The objectname of the array to be taken to display in the dropdown	string	name	Yes
placeholder	Placeholder for the input field	string	Input here	No
Max height	Height of the dropdown (px)	number	300	No
Inputdirection	The direction of the search input. Can be `rtl` or `ltr` ( default )	string	ltr	No
heading	The header text of the dropdown to be displayed	string	none	No
subtitleEnabled	The optional sub heading beneath the main title	boolean	false	No
subTitleKey	The objectname of the array to be taken to display in the subtitle field	string	none	No
minorTitleEnabled	The optional minor heading at the very right of the main title	string	false	No
minorTitleKey	The objectname of the array to be taken to display in the minortitle field	string	none	No
limit	Number thats limits the number of options displayed in the UI (if zero, options will not be limited)	number	0	No
noDataText	The placeholder when there is no value matching with the word entered	string	No data found	No

Output

Name	Type	description
`searchChange`	Event	Change event when typing in the input field
`valueSelect`	Event	Select event when a value is selected from dropdown
`blurInput`	Event	Event once the input field is blurred
`clickInput`	Event	Click event upon clicking on the input field