Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including ngx-dropdowns with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. var ngxDropdowns = require("ngx-dropdowns")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-dropdowns v0.0.6

Angular Dropdown Component

NGX Dropdowns

Simple Angular (4 and beyond) tree-shakable, AOT, Universal, and Web Worker compatible dropdown component. Currently unstable and in test mode.

How To Use

$ npm i ngx-dropdowns --save



  • dropdownItems: any[] - Array of elements to display as dropdown items.
  • header: string | number - Optional non selectable header to display at the top of the dropdown.
  • pathToItemValue: string | any[] - Optional (for use when passing in an array of objects) as dropdown items - indicates the path to value for the dropdown item. Should match path requirements for lodash function get(object, path).


  • onItemSelect: EventEmitter<any> - Dropdown item onClick event.

Integration with Webpack

Import the DropdownModule.

import { DropdownModule } from 'ngx-dropdowns';

  imports: [ DropdownModule ],

 class AppModule {}

Integration with SystemJS

-- coming soon

Sample Usage

Basic Usage

Pass in an array of dropdown items and include the dropdown component in your host component's template:

<ngx-dropdown [dropdownItems]="[1, 2, 3, 4, 5]"></ngx-dropdown>
Usage With Title:

Basic usage steps + pass in a placeholder text to display instead of the first dropdown item element:

<ngx-dropdown [dropdownItems]="[1, 2, 3, 4, 5]" [header]=" 'Numbers' "></ngx-dropdown>
Usage When Action is Required When a Dropdown Item is Selected

Basic usage or usage with placeholder steps + pass in a function to call on item select:

<ngx-dropdown [dropdownItems]="[1, 2, 3, 4, 5]" (onItemSelect)="onNumberSelect();"></ngx-dropdown>
Usage When Iterating THrough an Array of Objects - Select Object Value To Display as Dropdown List Item

Basic usage or usage with placeholder steps + pass in the path to value for the dropdown item:

Sample variables defined in host component:

public employees: any[] = [{id: 1, name: 'Susan'}, {id: 2, name: 'Jacob'}, {id: 3, name: 'Rachel'}]
public pathToName: string = 'name';

Usage in Template:

<ngx-dropdown [dropdownItems]="employees" [pathToItemValue]="pathToName"></ngx-dropdown>



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free