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

• @mahfuz_shuvo