ngx-sand-typeahead
v0.3.0
Published
An angular typeahead package module.
Downloads
4
Maintainers
Readme
Demo
Table of contents
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>
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 |
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.