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