Miss any of our Open RFC calls?Watch the recordings here! »


0.0.6 • Public • Published

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 employeesany[] = [{id: 1, name: 'Susan'}, {id: 2, name: 'Jacob'}, {id: 3, name: 'Rachel'}]
public pathToNamestring = 'name';

Usage in Template:

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




npm i ngx-dropdowns

DownloadsWeekly Downloads






Last publish


  • avatar