search-multiselect-dropdown v16.0.0

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

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

DropDownConfig Class

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.