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

1import { FormsModule } from "@angular/forms";
2import { SearchMultiselectDropdownModule } from "search-multiselect-dropdown";
3
4@NgModule({
5  imports: [FormsModule, SearchMultiselectDropdownModule],
6})
7export class AppModule {}

Usage

1import { Component } from "@angular/core";
2import { DropDownConfig } from "search-multiselect-dropdown"; // Class for dropdown configuration
3
4export class AppComponent {
5  public config: DropDownConfig = {
6    displayKey: "name", // If objects array passed which key to be displayed defaults to description
7    search: true, // If wants to find item by name and select
8    height: "300px", // Set max height of list container
9    placeholder: "Search and select", // Set placeholder
10    noResultsFound: "No result found", // Set text if no items available
11    multiple: true, // Set true if want to select multiple items else for single selection set false
12    disabled: false, // To disable the dropdown
13    filterBlankData: true, // To filter tha blank or empty value from array of options
14    showSelectedAtDropdown: false, // To show the selected list to dropdown lable instead of under dropdown
15    theme: {
16      inputBackground: "#40404c", // Set backgound color for main input box
17      inputColor: "#fff", // Set text color of main input box
18      containerListBackground: "#40404c", // Set background color for list container
19      ContainerListColor: "#fff", // Set text color for list container
20      selectedItemColor: "#fff", // Set text color for selected itemd
21      selectedItemBackground: "#EF411F", //Set background color for selected itemd
22      listHoverBackground: "#EF411F", // Set background color for mouse hover item list
23      listHoverColor: "#fff", // Set text color for mouse hover item list
24      searchInputColor: "#fff", // Set search text color for search input box
25    },
26  };
27
28  selectedOptions = [
29    {
30      _id: "5a66d6c31d5e4e36c7711b7a",
31      index: 0,
32      balance: "$2,806.37",
33      picture: "http://placehold.it/32x32",
34      name: "Burns Dalton",
35    },
36    {
37      _id: "5a66d6c3657e60c6073a2d22",
38      index: 1,
39      balance: "$2,984.98",
40      picture: "http://placehold.it/32x32",
41      name: "Mcintyre Lawson",
42    },
43  ];
44
45  options = [
46    {
47      _id: "5a66d6c3657e60c6073a2d22",
48      index: 1,
49      balance: "$2,984.98",
50      picture: "http://placehold.it/32x32",
51      name: "Mcintyre Lawson",
52    },
53    {
54      _id: "5a66d6c376be165a5a7fae33",
55      index: 2,
56      balance: "$2,794.16",
57      picture: "http://placehold.it/32x32",
58      name: "Amie Franklin",
59    },
60    {
61      _id: "5a66d6c3f7854b6b4d96333b",
62      index: 3,
63      balance: "$2,537.14",
64      picture: "http://placehold.it/32x32",
65      name: "Jocelyn Horton",
66    },
67    {
68      _id: "5a66d6c31f967d4f3e9d84e9",
69      index: 4,
70      balance: "$2,141.42",
71      picture: "http://placehold.it/32x32",
72      name: "Fischer Erickson",
73    },
74  ];
75}

1<search-multiselect-dropdown [config]="config" [(ngModel)]="selectedOptions" [options]="options"></search-multiselect-dropdown>
2
3<pre style="margin: 20px 0;">
4    {{selectedOptions | json}}
5 </pre
6>

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

1public config: DropDownConfig = {
2    displayKey: 'name', // If objects array passed which key to be displayed defaults to description
3    search: true, // If wants to find item by name and select
4    height: '300px', // Set max height of list container
5    placeholder: 'Search and select', // Set placeholder
6    noResultsFound: 'No result found', // Set text if no items available
7    multiple: true, // Set true if want to select multiple items else for single selection set false
8    disabled: false, // To disable the dropdown
9    filterBlankData: true, // To filter tha blank or empty value from array of options
10    showSelectedAtDropdown: false, // To show the selected list to dropdown lable instead of under dropdown
11    theme: {
12      inputBackground: '#40404c', // Set backgound color for main input box
13      inputColor: '#fff', // Set text color of main input box
14      containerListBackground: '#40404c', // Set background color for list container
15      ContainerListColor: '#fff', // Set text color for list container
16      selectedItemColor: '#fff', // Set text color for selected itemd
17      selectedItemBackground: '#EF411F', //Set background color for selected itemd
18      listHoverBackground: '#EF411F', // Set background color for mouse hover item list
19      listHoverColor: '#fff', // Set text color for mouse hover item list
20      searchInputColor: '#fff' // Set search text color for search input box
21    }
22  };

Dependencies

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

Big Thanks To

• Rus Lan for finding problem and fixing bugs.