Nighttime Peanut Migrations

    input-search-select-option
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Agular Input Search And Select Option Dropdown

    All Contributors npm npm downloads

    input-search-select-option Custom input search select option component for Angular 8+ with search item, selection options with customizing themes.

    Supports

    • Angular 9 and 9+ Supported
    • If your TypeScript is lower than 3.7 and angular version is lower than 9 version. Update TypeScript else go to tsconfig.json file and add "skipLibCheck": true in "compailerOptions"

    Features

    • Input Search And Find
    • Working similar like select options
    • Angular forms support
    • Cross browser support
    • Modify colors and background
    • Modify height and width of input and list container

    Extra Features

    • You can call create event and create new value by adding create = true in config object.
    • Similar you have an option edit/update icon under list of items. You can select and update your item by calling update event. To use this feature set update = true in config object.
    • Clear on selection of object

    Installation

    npm install --save input-search-select-option
    

    Include it to your module for example your app.module.ts

    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { InputSearchSelectOptionModule } from 'input-search-select-option';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        FormsModule,
        ReactiveFormsModule,
        InputSearchSelectOptionModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Usage

    import { ChangeDetectorRef, Component } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { InputSearchSelectConfig } from 'input-search-select-option';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      id = null;
      reactiveForm: FormGroup;
      options = [
        {
          id: 1,
          value: 'Test User 1'
        },
        {
          id: 2,
          value: 'Test User 1'
        },
        {
          id: 3,
          value: 'Test User 1'
        },
        {
          id: 4,
          value: 'Test User 1'
        }
      ];
      config: InputSearchSelectConfig = {
        idKey: '_id',
        displayKey: 'name',
        height: '250px',
        width: '100%',
        noResultsFound: 'No resource available',
        placeholder: 'Select Resource',
        showNoResultMessage: false,
        clearOnSelection: false,
        create: true,
        update: true,
        theme: {
          customValidationClass: 'is-invalid ',
          inputBackground: '#fff',
          inputColor: '#000',
          containerListBackground: '#40404c',
          ContainerListColor: '#fff',
          listHoverBackground: '#EF411F',
          listHoverColor: '#fff',
          listFontSize: '14px',
          iconColor: '#EF411F',
          iconBackground: '#EF411F',
          iconBorder: '1px solid #EF411F',
        }
      };
    
      constructor(fb: FormBuilder, private cdr: ChangeDetectorRef) {
        this.reactiveForm = fb.group({
          title: ['', Validators.compose([Validators.required])],
        });
      }
    
      callCreate($event): void {
        this.options = [...this.options, {
          id: 5,
          value: $event
        }];
        this.id = 5;
      }
    
      callUpdate($event): void {
        if ($event) {
          const index = this.options.findIndex(x => x.id == $event._id);
          if (index > -1) {
            this.options[index].value = $event.value;
            this.options = [...this.options];
            this.id = $event._id;
          }
        }
      }
    
      getValue($event): void {
        console.log($event);
      }
    
      reset() {
        this.reactiveForm.reset();
      }
    }
     <div class="p-5">
      <div class="row" [formGroup]="reactiveForm">
        <div class="col-3">
          {{id}}
          <input-search-select-option formControlName="title" [form]="reactiveForm" [controlName]="'title'" [(ngModel)]="id"
            (ngModelChange)="getValue($event)" [config]="config" [options]="options" (createEvent)="callCreate($event)"
            (updateEvent)="callUpdate($event)">
          </input-search-select-option>
          <button class="btn btn-primary" (click)="reset()"> Reset </button>
        </div>
      </div>
    </div>
    
    <!-- To use reactive form validation please pass formGroup name in [form] like above e.g and pass control name -->

    Settings

    • The required fields contains * this shows mandatory fields.
    Setting Type Description Default Value
    * displayKey String If objects array passed which key to be displayed defaults to description 'value'
    * idKey String To return the selected value pass idKey 'id'
    placeholder String Text to be show in the dropdown, when no items are selected. 'Select Item'
    disabled Boolean Disable the dropdown false
    options Array Array of items from which to select. Should be an array of objects with id and text properties. You can also use custom properties. In that case you need to map idField and textField properties. (Mapping is required) n/a
    noResultsFound String Text to be show in list container if array of option list is empty or search result not found 'No results found!'
    height String Set maximum height of the input and dropdown list in any unit e.g. '400px' 'auto'
    width String Set maximum width of the input and dropdown list in any unit e.g. '100%' '100%'
    create Boolean Set create true for calling create event to add new value in list. Call (createEvent)="onCallCreateEvent($event)" this will get you new typed value to save in list. $event returns value eg. "Call to new feature". false
    update Boolean Set update true for calling update event to update new value in list of selected object. Call (updateEvent)="onCallUpdateEvent($event)" this will get you new typed value to update in list of selected item. $event returns object contains _id and value. false
    clearOnSelection Boolean This will clear the input field after selecting the item or creating / updating item. Whenever want to add multiple times selected value in table or any other array list. This helps to cleare the input search box and search again and select to add. false
    theme Object Using class DropDownConfig object set various colors and backgound to dropdown n/a

    Theme Config Class

    Setting Type Description Default Value
    customValidationClass String Set your custom validation class for form validation 'invalid'
    inputBackground String Set backgound color for main input box '#40404c'
    inputColor String Set text color of main input box '#fff'
    containerListBackground String Set background color for list container '#40404c'
    ContainerListColor String Set text color for list container '#fff'
    listHoverBackground String Set background color for mouse hover item list '#EF411F'
    listHoverColor String Set text color for mouse hover item list '#fff'
    listFontSize String Set font size for list item '14px'
    iconColor String Set icon color for create, update, cancel button '#0085dd'
    iconBackground String Set icon background for create, update, cancel button '#fff'
    iconBorder String Set icon border for create, update, cancel button '1px solid #0085dd'

    Config Basic Setting

    public config: InputSearchConfig = {
        displayKey: 'value', // If objects array passed which key to be displayed defaults to description
        idKey: '_id', // Id is mandetory to get selected item from list.
        height: '300px', // Set max height of list container
        width: '100%', // Set max width of input and list container
        placeholder: 'Search and select', // Set placeholder
        noResultsFound: 'No result found', // Set text if no items available
        disabled: false, // To disable the input tag
        showNoResultMessage: true, // To show no result found message if false it will not display any message on no result found.
        clearOnSelection: false, // If set true after selection of item input text will be cleared.
        create: false, // To call the create new value event and show create icon
        update: false, // To call the update selected value event and show edit and cancel icon to update value
        theme: {
            customValidationClass : 'invalid' // To set custom validation class
            inputBackground: '#40404c', // Set backgound color for main input box
            inputColor: '#fff', // Set text color of main input box
            containerListBackground: '#40404c', // Set background color for list container
            ContainerListColor: '#fff', // Set text color for list container
            listHoverBackground: '#EF411F', // Set background color for mouse hover item list
            listHoverColor: '#fff', // Set text color for mouse hover item list
            listFontSize: '14px', // Set font size for list item
            iconColor: '#0085dd', // Set icon color for create, edit, cancel button
            iconBackground: '#fff', // Set icon backgound for create, edit, cancel button
            iconBorder: '1px solid #0085dd', // Set icon border for create, edit, cancel button
    
        }
      };

    Dependencies

    • Angular 8 and 8+
    • Font awesome icon library 4.7.0

    Install

    npm i input-search-select-option

    DownloadsWeekly Downloads

    8

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    457 kB

    Total Files

    29

    Last publish

    Collaborators

    • bhushanzade