Agular Search And Multiselection Dropdown

search-multiselect-dropdown Custom Dropdown component for Angular 8+ with search item, multiple and single selection options with customizing themes.

Supports

| Angular Version | Package Version | Description | | :-------------- | :-------------- | :------------------------------------------------------ | | Angular 8 | Version 2 any | If your version is angular 8 use Version 2 from library | | Angular 9 or 10 | Version 3 any | If your version is angular 9 use Version 3 from library | | Angular 12+ | Version 14 any | If your version is angular 9 use Version 3 from library | | Angular 15+ | Version 16 any | If your version is angular 9 use Version 3 from library |

Features

• Single select dropdown
• Multi select dropdown
• Search dropdown list
• Angular forms support
• Angular v8 and above supported
• Cross browser support
• Modify colors and background
• Modify height of list container

Installation

npm install search-multiselect-dropdown

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

import { FormsModule } from "@angular/forms";
import { SearchMultiselectDropdownModule } from "search-multiselect-dropdown";

@NgModule({
  imports: [FormsModule, SearchMultiselectDropdownModule],
})
export class AppModule {}

Usage

import { Component } from "@angular/core";
import { DropDownConfig } from "search-multiselect-dropdown"; // Class for dropdown configuration

export class AppComponent {
  public config: DropDownConfig = {
    displayKey: "name", // If objects array passed which key to be displayed defaults to description
    search: true, // If wants to find item by name and select
    height: "300px", // Set max height of list container
    placeholder: "Search and select", // Set placeholder
    noResultsFound: "No result found", // Set text if no items available
    multiple: true, // Set true if want to select multiple items else for single selection set false
    disabled: false, // To disable the dropdown
    filterBlankData: true, // To filter tha blank or empty value from array of options
    showSelectedAtDropdown: false, // To show the selected list to dropdown lable instead of under dropdown
    theme: {
      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
      selectedItemColor: "#fff", // Set text color for selected itemd
      selectedItemBackground: "#EF411F", //Set background color for selected itemd
      listHoverBackground: "#EF411F", // Set background color for mouse hover item list
      listHoverColor: "#fff", // Set text color for mouse hover item list
      searchInputColor: "#fff", // Set search text color for search input box
    },
  };

  selectedOptions = [
    {
      _id: "5a66d6c31d5e4e36c7711b7a",
      index: 0,
      balance: "$2,806.37",
      picture: "http://placehold.it/32x32",
      name: "Burns Dalton",
    },
    {
      _id: "5a66d6c3657e60c6073a2d22",
      index: 1,
      balance: "$2,984.98",
      picture: "http://placehold.it/32x32",
      name: "Mcintyre Lawson",
    },
  ];

  options = [
    {
      _id: "5a66d6c3657e60c6073a2d22",
      index: 1,
      balance: "$2,984.98",
      picture: "http://placehold.it/32x32",
      name: "Mcintyre Lawson",
    },
    {
      _id: "5a66d6c376be165a5a7fae33",
      index: 2,
      balance: "$2,794.16",
      picture: "http://placehold.it/32x32",
      name: "Amie Franklin",
    },
    {
      _id: "5a66d6c3f7854b6b4d96333b",
      index: 3,
      balance: "$2,537.14",
      picture: "http://placehold.it/32x32",
      name: "Jocelyn Horton",
    },
    {
      _id: "5a66d6c31f967d4f3e9d84e9",
      index: 4,
      balance: "$2,141.42",
      picture: "http://placehold.it/32x32",
      name: "Fischer Erickson",
    },
  ];
}

<search-multiselect-dropdown [config]="config" [(ngModel)]="selectedOptions" [options]="options"></search-multiselect-dropdown>

<pre style="margin: 20px 0;">
    {{selectedOptions | json}}
 </pre
>

Settings

| Setting | Type | Description | Default Value | | :--------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ | | multiple | Boolean | Mode of this component. If set true user can select more than one option. | false | | placeholder | String | Text to be show in the dropdown, when no items are selected. | 'Select Item' | | searchPlaceholder | String | Text to be show in the search input box. | 'Search...' | | disabled | Boolean | Disable the dropdown | false | | filterBlankData | Boolean | To filter tha blank or empty value from array of options | false | | showSelectedAtDropdown | Boolean | To show the selected list to dropdown lable instead of under 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. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text(no mapping is required) | n/a | | search | Boolean | If wants to find item by name and select | false | | displayKey | String | If objects array passed which key to be displayed defaults to description | 'value' | | 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 dropdown list in any unit e.g. '400px' | 'auto' | | theme | Object | Using class DropDownConfig object set various colors and backgound to dropdown | n/a |

DropDownConfig Class

| Setting | Type | Description | Default Value | | :---------------------- | :----- | :--------------------------------------------- | :------------ | | 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' | | selectedItemColor | String | Set text color for selected itemd | '#fff' | | selectedItemBackground | String | et background color for selected itemd | '#EF411F' | | listHoverBackground | String | Set background color for mouse hover item list | '#EF411F' | | listHoverColor | String | Set text color for mouse hover item list | '#fff' | | searchInputColor | String | Set search text color for search input box | '#fff' |

Config Basic Setting

public config: DropDownConfig = {
    displayKey: 'name', // If objects array passed which key to be displayed defaults to description
    search: true, // If wants to find item by name and select
    height: '300px', // Set max height of list container
    placeholder: 'Search and select', // Set placeholder
    noResultsFound: 'No result found', // Set text if no items available
    multiple: true, // Set true if want to select multiple items else for single selection set false
    disabled: false, // To disable the dropdown
    filterBlankData: true, // To filter tha blank or empty value from array of options
    showSelectedAtDropdown: false, // To show the selected list to dropdown lable instead of under dropdown
    theme: {
      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
      selectedItemColor: '#fff', // Set text color for selected itemd
      selectedItemBackground: '#EF411F', //Set background color for selected itemd
      listHoverBackground: '#EF411F', // Set background color for mouse hover item list
      listHoverColor: '#fff', // Set text color for mouse hover item list
      searchInputColor: '#fff' // Set search text color for search input box
    }
  };

Dependencies

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

Big Thanks To

• Rus Lan for finding problem and fixing bugs.