Ng-Searchable-Multiselect-Dropdown
This is a customized select option. Using this you can search from select and you can use multiple select options as well as.
Installation
Install the package with npm
npm install ng-searchable-multiselect-dropdown
Usage/Examples
import { NgSearchableMultiselectDropdownModule } from 'ng-searchable-multiselect-dropdown';
@NgModule({
imports: [
NgSearchableMultiselectDropdownModule
],
...
})
<ng-searchable-multiselect-dropdown
placeholder = "Select car"
keyword = "model"
[options] = "cars"
[allowSearchable] = "false"
[allowMultipleSelect] = "true"
[itemShowLimit] = 2
[id]="select-id"
(selectedItemEvent)="getSelectedItem($event)"
>
</ng-searchable-multiselect-dropdown>
public cars = [
{
'model': 'Lamborghini Aventador',
'category': 'sports',
'brand': 'Lamborghini',
'price': 6.25 // price in crore
},
{
'model': 'Ferrari F8 Tributo',
'category': 'sports',
'brand': 'Ferrari',
'price': 4.02 // price in crore
},
{
'model': 'Aston Martin DBS Superleggera',
'category': 'sports',
'brand': 'Aston Martin',
'price': 5.00 // price in crore
},
{
'model': 'Bugatti Veyron',
'category': 'sports',
'brand': 'Bugatti',
'price': 12.00 // price in crore
}
]
Environment Variables
To run this project, you will need to add the following environment variables to your project file
keyword: string
placeholder: string
options: []
itemShowLimit: number
allowSearchable: boolean
allowMultipleSelect: boolean
id: string
selectedItemEvent: event
Color Reference
| Color | Hex |
|---|
| Primary Color |  #1182de |
| Secodary Color |  #e0e0e0 |
Features
- Single select dropdown
- Multi select dropdown
- Search and select multiple from list
- Search and select single from list
- Cross browser support
- Easy to use and easy to handle
Tech Stack
Client: Angular, Typescript, Javascript, HTML5, CSS3
Feedback
If you have any feedback, please reach out to us at i.maf.shuvo@gmail.com
Authors
