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 [email protected]

Authors

• @mahfuz_shuvo