ngx-dropdown-list

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

Installation

npm install ngx-dropdown-list --save

DEMO

Check out the DEMO for more information!

Usage

Importing The 'ngx-dropdown-list' Module

import { DropdownListModule } from 'ngx-dropdown-list';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    DropdownListModule,
    ...
  ],
  providers: [],
  bootstrap: [...]
})

export class AppModule { }

Enabling Dropdown List

<ngx-dropdown-list (selectionChange)="onChange($event)"
                   [items]="optionItems"
                   [multiSelection]="false"
                   [placeHolder]="'place holder of the drop-down list'"
                   [(selectedValue)]="maxRowsLimitation"
                   [suffixText]="' suffix text'"
                   [filterBox]="false"
                   [formatNumber]="true"
                   [disabled]="false">
</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:

/* input date without group info. */
optionItems = [
  {id: 'Max',     value: 'Max',     text: 'Maximum'},
  {id: 'Average', value: 'Average', text: 'Average'},
  {id: 'Sum',     value: 'Sum',     text: 'Total'},
  {id: 'Last',    value: 'Last',    text: 'Last'}
];

/* input date with group info. */
timezones = [
  {group: 'Africa', items: [
      {id: '1', value: 'Africa/Abidjan', text: 'Africa - Abidjan'},
      {id: '2', value: 'Africa/Accra', text: 'Africa - Accra'},
      {id: '3', value: 'Africa/Addis_Ababa', text: 'Africa - Addis Ababa'},
      {id: '4', value: 'Africa/Algiers', text: 'Africa - Algiers'},
      {id: '5', value: 'Africa/Asmara', text: 'Africa - Asmara'},
    ]},
  {group: 'America', items: [
      {id: '6', value: 'America/Adak', text: 'America - Adak'},
      {id: '7', value: 'America/Anchorage', text: 'America - Anchorage'},
      {id: '8', value: 'America/Anguilla', text: 'America - Anguilla'},
      {id: '9', value: 'America/Antigua', text: 'America - Antigua'},
      {id: '10', value: 'America/Araguaina', text: 'America - Araguaina'},
    ]}
  ]

Todo

• ~~Support Angular 13~~
• ...

License

MIT