Have ideas to improve npm?Join in the discussion! »

    angular-multi-single-dropdown
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.7 • Public • Published

    angular-multi-single-select-dropdown

    Angular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.

    Getting Started

    Features

    • dropdown with single/multiple selction option
    • bind to any custom data source
    • search filter for searching list of data
    • show or hide select all/deselect All button
    • select/de-select all items
    • textKey of array, example- name: 'santosh', here name is the text key
    • valueKey of array, example- name: 'santosh', here name is the value key
    • itemsShowLimit in select button
    • addCssClass, add css class in multi-select-dropdown
    • multi-select-dropdown custom placeholder
    • multi-select-dropdown custom change close button name
    • multi-select-dropdown custom change select-all/de-select-all button name
    • custom search filter placeholder

    Installation

    npm i angular-multi-single-dropdown
    
    
    ```ts
    import { multiSingleDropDownModule } from 'angular-multi-single-dropdown';
    // ...
    
    @NgModule({
      imports: [
        multiSingleDropDownModule
        // ...
      ]
      // ...
    })
    export class AppModule {}
    

    Usage

    import { Component, OnInit } from '@angular/core';
     
    export class AppComponent implements OnInit {
      userArray: any[] = [];
      selectedItems = [];
      options: object;
      
      ngOnInit () {
        this.userArray = [{ name: 'santosh', id: 1 },
        { name: 'nitin', id: 2 },
        { name: 'riya', id: 3 },
        { name: 'rishi', id: 4 },
        { name: 'muskan', id: 5 },
        { name: 'nandini', id: 6 }, 
        { name: 'krishna', id: 7 }]; // in array, Id is optional
      
      this.options = {
          allowSearchFilter: true,  // boolean option if user want to show or hide search box in drop-down
          isSelect: true,  // option if user want to show or hide selectAll/DeSelectAll button in drop-down
          isMultiSelectOrSingleSelect: true,  // if set true then you can use Multi-select drop-down else you can use single select drop-down
          textKey: 'name',  // this is the text-Key of your array, example- name: 'santosh', here name is the text key
          valueKey: 'name',  // this is the value-Key of your array, example- name: 'santosh' or id: 1
          array: this.userArray,  // This is User Array
          itemsShowLimit: 3,  // option if user want to show minimum 3 selected data in drop-down button
          addCssClass: '',  // By using this user can add CSS class in drop-down
          texts: {
            selectPlaceHolder: '',  // This is placeholder of drop-down, if user set empty then default placeholder will be showed
            closeButtonName: '',  // user can change close button name by passing name, default it set close
            selectAllButtonName: 'Select All',  // user can change or edit select All button name
            unSelectAllButtonName: 'UnSelect All',  // user can change or edit Unselect All button name
            searchPlaceHolder: 'Search drop-down items' // user can change or edit search placehoder
          },
          disableDropdown: false // disable dropdown
        };
      }
      
      
     
         onItemSelect(event): void {
          this.selectedItems = event;  // getArrayData is your selected checkbox data array
          console.log(this.selectedItems);
      }
        
    }
    <ng-multi-select-dropdown [option] = options 
                              (messageEvent)='onItemSelect($event)'>
    </ng-multi-select-dropdown>

    options


    options Type Description Default Value
    allowSearchFilter Boolean If set true then search filter will be show in multi-select-dropdown else hide. true
    isSelect Boolean if you want to show or hide selectAll/DeSelectAll button in drop-down. true
    isMultiSelectOrSingleSelect Boolean if set true then you can use Multi-select drop-down else you can use single select drop-down true
    textKey String this is the text-Key of your array, example- name: 'santosh', here name is the text key 'name'
    valueKey String this is the value-Key of your array, example- name: 'santosh' or id: 1 'name'
    array Array This is User Array user Array
    itemsShowLimit Number Limit the number of items to show in the input select button. If not set will show number of selected. 3
    addCssClass String By using this user can add CSS class in drop-down ''
    selectPlaceHolder String This is placeholder of drop-down, if you set empty then default placeholder will be showed ''
    closeButtonName String user can change close button name by passing name, default it set close. ''
    selectAllButtonName String user can change or edit select All button name 'Select All'
    unSelectAllButtonName String user can change or edit Unselect All button name 'UnSelect All'
    searchPlaceHolder String user can change or edit search placehoder. 'Search drop-down items'
    disableDropdown boolean disable dropdown checkbox false

    Callback Methods

    • messageEvent - Return the selected item when an item is checked. Example : (messageEvent)="onItemSelect($event)"

    Run locally

    • Clone the repository or downlod the .zip,.tar files.
    • Run npm install
    • Run ng serve for a dev server
    • Navigate to http://localhost:4200/

    Library Build / NPM Package

    Run yarn build:lib to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.

    Development

    This project was generated with Angular CLI version 6.0.8.

    Contributions

    Contributions are welcome, please open an issue and preferrably file a pull request.

    Opening Issue

    Please share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.

    License

    MIT License.

    Install

    npm i angular-multi-single-dropdown

    DownloadsWeekly Downloads

    5

    Version

    2.1.7

    License

    MIT

    Unpacked Size

    134 kB

    Total Files

    38

    Last publish

    Collaborators

    • avatar