ngx-sand-typeahead

An angular typeahead package

---

Demo

• Live Demo
• Playground
• NPM package

Table of contents

• Features
• Installation
• API
• Usage

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

Goto Top

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

Goto Top

Help Improve

Found a bug or an issue with this? Open a new issue here on GitHub.

Contribute

Please check the Contributing Guidelines before contributing.

This project was generated with Angular CLI version 10.0.5.