ngx-sand-typeahead
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    ngx-sand-typeahead

    An angular typeahead package


    GitHub release GitHub last commit GitHub issues GitHub pull requests ESLint ESLint ESLint Codesize Top Language


    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

    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.

    Install

    npm i ngx-sand-typeahead

    DownloadsWeekly Downloads

    1

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    223 kB

    Total Files

    25

    Last publish

    Collaborators

    • sandeepbalachandran