# ngd-dropdown > NGD-DROPDOWN is an Angular library for multiselectable and singleselectable dropdown component. The goal is to create a simple core library that makes option selection process nice and easy. Latest version **0.3.38** (published 2020-01-24) · 0 weekly downloads ## Install ```sh npm install ngd-dropdown pnpm add ngd-dropdown yarn add ngd-dropdown bun add ngd-dropdown ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.3.38 | | Published | 2020-01-24 | | First published | 2018-05-15 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 334 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Maintainers | heyder_shukurov | | Keywords | angular, typescript, dropdown, multiselect, multiselect-dropdown, select | ## Links - npm: https://www.npmjs.com/package/ngd-dropdown - Repository: https://github.com/heydershukurov01/ngd-dropdown - Issues: https://github.com/heydershukurov01/ngd-dropdown/issues - npm.io page: https://npm.io/package/ngd-dropdown ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^1.9.0 ## Alternatives - [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads - [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads - [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads - [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads - [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads ## Recent versions - 0.3.38 (latest) — 2020-01-24 - 0.3.37 — 2020-01-24 - 0.3.36 — 2020-01-24 - 0.3.35 — 2020-01-24 - 0.3.34 — 2019-12-11 - 0.3.33 — 2019-11-21 - 0.3.32 — 2019-11-21 - 0.3.31 — 2019-11-21 - 0.3.30 — 2019-07-29 - 0.3.29 — 2019-07-29 - 0.3.28 — 2019-07-29 - 0.3.27 — 2019-07-29 - 0.3.26 — 2019-07-29 - 0.3.25 — 2019-07-29 - 0.3.24 — 2019-07-29 - … 37 more at https://npm.io/package/ngd-dropdown/versions ## README # NGD-DROPDOWN **NGD-DROPDOWN** is an Angular library for multiselectable and singleselectable dropdown component. The goal is to create a simple core library that makes option selection process nice and easy. ## Current Version (0.3.10) Changelog - Placeholder input for dropdown placeholder - Search Placeholder input for search input placeholder ## Current Version (0.3.0) Changelog - Dropdown closes if clicked outside - Major Bug Fixes - Performance upgrade ## Version (0.2.0) Changelog - Select all button - Now only selected option's value is emitted (before it was selected object) - New configs (checkout for [more](#configurations-configs)) - New Outputs - Minor Bug Fixes - Performance upgrade ## Version (0.1.0) Changelog - Support for Angular version 7 - Support for Reactive Forms - Support for [(ngModel)] 2 way data binding - Minor Bug Fixes - Huge Performance upgrade ## Install #### [npm](https://www.npmjs.com/package/ngd-dropdown) ``` npm install ngd-dropdown --save ``` ## Usage Dropdown selector is easy to integrate In your app.module.ts (bootstrap module) ``` import {DropdownModule} from 'dropdown'; ``` ``` @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, DropdownModule ] }) ``` in your component.ts file ```angular2html @Component({ selector: 'desired-components', template: './desired-component.component.html' }) export class DesireComponent { public configs: NgdDropdownConfigs = { theme: 'default', placeholder: 'Select item', noData: 'No data was found!', selectAll: true, selectAllText: 'Select all', multiple: true, jsSearch: true, serverSearch: true, searchTimeout: 200, option: { name: 'text', value: 'id' } } public options: any[] = [ {text: 'Text 1', id: 1}, {text: 'Text 2', id: 2}, {text: 'Text 3', id: 3}, ] public value: any; } ``` in yout template.html file ```angular2html ``` ## Inputs ### Configurations [configs] The configurations are for customization. All the default values are provided. See table below to be able to correctly configure component | property | type | default | description | | --------------------- | ------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------- | | `theme` | `default` | 'default' | Component theme; | | `placeholder` | `string` | 'Select item' | The placeholder will be displayed on the selectbox area, if there is not any value selected or provided to display; | | `noData` | `string` | 'No data was found!' | Message will be shown if no option provided to display; | | `selectAll` | `boolean` | 'false' | Select all button will be displayed; | | `selectAllText` | `boolean` | 'false' | Select all button text; | | `multiple` | `boolean` | `false` | If multiple selection required or not | | `jsSearch` | `boolean` | `false` | Activates client side search mechanism | | `serverSearch` | `boolean` | `false` | Use for server side search | | `searchTimeout` | `number` | `0` | if `serverSearch` is true will emit search term after given time | | `option` | `{name: string, value: string}` | `{name: 'text', value: 'id'}` | `name` will be used as option name `value` will be used as value of the option | | ### Options [options] type: `any[]` \ default: `[]` \ description: `The array of options [reactive]. Will be displayed as selectable options in the dropdown` ### Value [(ngModel)] type: `any | any[]` \ default: `null` \ description: `Two way data binded value of select object. If multiple selection enabled value will be array else will be string or number` ### placeholder type: `string` default: `null` description: `Placeholder for select dropdown` ### searchPlaceholder type: `string` default: `null` description: `Placeholder for search input` ## Outputs ### Dropdown Opened (dropdownOpened) type: `void` \ description: `This event only triggers when dropdown is opened` ### Dropdown Closed (dropdownClosed) type: `void` \ description: `This event only triggers when dropdown is closed` ### Dropdown Toggle (dropdownToggle) type: `boolean` \ description: `This event triggers when dropdown is both closed and opened. If dropdown opened the true value will be emitted. If dropdown closed the false value will be emitted` ### Selected (selected) type: `any` \ description: `This event triggers when option is selected and emits the value of selected object` ### Unselected (unselected) type: `any` \ description: `This event triggers when option is deselected and emits the value of deselected object` ### AllSelected (allSelected) type: `any` \ description: `This event triggers whenSelect all button clicked and all the options were selected` ### All Unselected (allUnselected) type: `any` \ description: `This event triggers when select all button clicked and all the previously selected options were deselected` ### Search (search) type: `string` \ description: `This event triggers when server side search is enabled and emits search term of search box` ### Raw Data (rawData) type: `{action: string, payload: any}` \ description: `This event triggers when selected and unselected option. But the tricky part is it emits both action and raw data of selected object` ## Support Tested in Chrome , Firefox , IE 9-11 , Edge , Safari ## Copyright Copyright © 2018 - 2019 --- _Source: https://npm.io/package/ngd-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._