angular-dropdown-select

angular-dropdown-select

Multiple Dropdown Select - You can use this angular-dropdown-select apart from data tables as well.

Instance: A way to bind it with tables.

Installation

npm i angular-dropdown-select

Usage

Import

import { AngularDropdownSelectModule } from 'angular-dropdown-select';

Fundamental Usage

<lib-angular-dropdown-select 
      [headings]="headings" 
      [extras]="extras" 
      (onCheckBoxStatusChanged)="selectedColumnChange($event)" 
      (onUnselectAll)="getStatusOfUnselectedAll($event)">
</lib-angular-dropdown-select>

Configuration - Props

  selectedColumnChange(event: any){
    console.log(event);
  }

  getStatusOfUnselectedAll(event: any){
    console.log(event);
  }

headings = [
      { id: 1, name: 'id', checked: true },
      { id: 2, name: 'name', checked: true },
      { id: 3, name: 'age', checked: false },
      { id: 4, name: 'email', checked: true },
      { id: 5, name: 'emp_number', checked: true }
];

extras = {
      uncheckAllStatus: false,
      dropdownButtonText: 'Title'
}

Fundamentals / Mandatories

Property/Method	Type	Description
headings.id	number	IDs of dropdown select items
headings.name	string	Names of dropdown select items Or Headings of table shown in example
headings.checked	boolean	Status/Visibility of dropdown select
extras.uncheckAllStatus	boolean	Boolean flag to handle all checked/unchecked state
extras.dropdownButtonText	boolean	To update Button text, else default text is 'Table Columns'
selectedColumnChange(e)	method	Recieve emitted value for "onCheckBoxStatusChanged"
getStatusOfUnselectedAll(e)	method	Recieve emitted value for "onUnselectAll"

Future Plans

• More decorative Approach in terms of CSS.
• Will come up with search functionality.

Author

Suraj Motwani - Email: [e-mail]

License

Angular Dropdown Select is available under the MIT license. See the LICENSE file for more info.