input-search-select-option v14.0.0

Agular Input Search And Select Option Dropdown

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.

Theme Config Class

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