Needlessly Promiscuous, Modularize!

    ngx-dropdown-list
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    ngx-dropdown-list

    npm npm downloads Travis MIT licensed

    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

    Install

    npm i ngx-dropdown-list

    DownloadsWeekly Downloads

    181

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    339 kB

    Total Files

    35

    Last publish

    Collaborators

    • ckyy