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

API

Inputs

• 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).

Outputs

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

Integration with Webpack

Import the DropdownModule.

import { DropdownModule } from 'ngx-dropdowns';

@NgModule({
  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>

License

MIT