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.