ngx-dropdown-list

An Angular 13 module for selecting data from drop-down list which supports multi-selection and filter.

Installation

1npm install ngx-dropdown-list --save

DEMO

Check out the DEMO for more information!

Usage

Importing The 'ngx-dropdown-list' Module

1import { DropdownListModule } from 'ngx-dropdown-list';
2
3@NgModule({
4  declarations: [
5    ...
6  ],
7  imports: [
8    DropdownListModule,
9    ...
10  ],
11  providers: [],
12  bootstrap: [...]
13})
14
15export class AppModule { }
16

Enabling Dropdown List

1<ngx-dropdown-list (selectionChange)="onChange($event)"
2                   [items]="optionItems"
3                   [multiSelection]="false"
4                   [placeHolder]="'place holder of the drop-down list'"
5                   [(selectedValue)]="maxRowsLimitation"
6                   [suffixText]="' suffix text'"
7                   [filterBox]="false"
8                   [formatNumber]="true"
9                   [disabled]="false">
10</ngx-dropdown-list>

Parameters

Name	Description	Example
(selectionChange)	On change function called after the status of selection changed	(selectionChange)="onChange($event)"
items	Source data of the drop-down list	[items]="optionItems"
multiSelection	Provides support for multiple selection	[multiSelection]="true"
placeHolder	Place holder of the drop-down list	[placeHolder]="'place holder of the drop-down list'"
selectedValue	selected value of the drop-down list, supports 2-way binding	[(selectedValue)]="maxRowsLimitation"
suffixText	suffix text of the drop-down list	[suffixText]="' suffix text'"
searchColumn	the column which will be searched by the search input	[searchColumn]="'KPI'"
filterBox	Enable or disable the filter input	[filterBox]="true"
formatNumber	Provides support for formatting numbers	[formatNumber]="true"
disabled	Enable or disable the drop-down list	[disabled]="false"

Input data samples:

1/* input date without group info. */
2optionItems = [
3  {id: 'Max',     value: 'Max',     text: 'Maximum'},
4  {id: 'Average', value: 'Average', text: 'Average'},
5  {id: 'Sum',     value: 'Sum',     text: 'Total'},
6  {id: 'Last',    value: 'Last',    text: 'Last'}
7];
8
9/* input date with group info. */
10timezones = [
11  {group: 'Africa', items: [
12      {id: '1', value: 'Africa/Abidjan', text: 'Africa - Abidjan'},
13      {id: '2', value: 'Africa/Accra', text: 'Africa - Accra'},
14      {id: '3', value: 'Africa/Addis_Ababa', text: 'Africa - Addis Ababa'},
15      {id: '4', value: 'Africa/Algiers', text: 'Africa - Algiers'},
16      {id: '5', value: 'Africa/Asmara', text: 'Africa - Asmara'},
17    ]},
18  {group: 'America', items: [
19      {id: '6', value: 'America/Adak', text: 'America - Adak'},
20      {id: '7', value: 'America/Anchorage', text: 'America - Anchorage'},
21      {id: '8', value: 'America/Anguilla', text: 'America - Anguilla'},
22      {id: '9', value: 'America/Antigua', text: 'America - Antigua'},
23      {id: '10', value: 'America/Araguaina', text: 'America - Araguaina'},
24    ]}
25  ]

Todo

• Support Angular 13
• ...

License

MIT