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.
