Angular Dropdown Select

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: [email protected]

License

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