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

14.0.0 • 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

/input-search-select-option/

    Package Sidebar

    Install

    npm i input-search-select-option

    Weekly Downloads

    5

    Version

    14.0.0

    License

    MIT

    Unpacked Size

    251 kB

    Total Files

    18

    Last publish

    Collaborators

    • bhushanzade