input-search-select-option

v14.0.0

Published

2 years ago

A Angular(8+) Input search select option with customizing theme.

Downloads

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme