Angular Filter Dropdown

Filter your data respective to any field based on your dataset Also, identifies duplications of data & handles with single checkbox created dynamically.

Installation

npm i angular-filter-dropdown

Usage

Import

import { AngularFilterDropdownModule } from 'angular-filter-dropdown';

@NgModule({
  ...
  imports: [
    ...
    AngularFilterDropdownModule
  ],
  ...
})

Fundamental Usage

<lib-angular-filter-dropdown 
    [tableData]="data" 
    [columnName]="colName" 
    (onCheckBoxStatusChanged)="checkboxStatusChange($event)" 
    (onUnselectAll)="getStatusOfUnselectedAll($event)">
</lib-angular-filter-dropdown>

Configuration - Props

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

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

let data = [
      { id: 1, name: 'John Doe', age: 30, email: '[email protected]'},
      { id: 2, name: 'Jane Doe', age: 28, email: '[email protected]'},
      { id: 3, name: 'Michael Smith', age: 35, email: '[email protected]'},
      { id: 4, name: 'Emily Johnson', age: 25, email: '[email protected]'},
      { id: 5, name: 'James Brown', age: 32, email: '[email protected]'},
      { id: 6, name: 'John Doe', age: 30, email: '[email protected]'},
      { id: 7, name: 'Jane Doe', age: 28, email: '[email protected]'},
      { id: 8, name: 'Michael Smith', age: 35, email: '[email protected]'},
      { id: 9, name: 'Emily Johnson', age: 25, email: '[email protected]'},
      { id: 10, name: 'James Brown', age: 32, email: '[email protected]'}
    ],

let colName = "name"

For identifiation of duplication of data & handles with single checkbox dynamically Just an instance, shared piece of code below for duplication handling.

ngOnInit(){
  this.replicaData = [...this.data.entries];  
}

checkboxStatusChange(event: any){
    let keysName = Object.keys(event);
    
    if(event[keysName[1]] === true){
      let result = this.replicaData.filter((obj: any) => obj[keysName[0]] === event[keysName[0]]);
      result.forEach((element:any) => {
        this.data.push(element);
        this.data.sort((a: any, b: any) => a.id - b.id)
      });
      
    }else{
      this.data = this.data.filter((obj: any) => obj[keysName[0]] !== event[keysName[0]]);
    }

    this.checkForDuplicationOfItems();
}

getStatusOfUnselectedAll(event: any){
    if(event === false){
      this.data = this.replicaData;
    }else{
      this.data = [];
    }
    this.checkForDuplicationOfItems();
}

checkForDuplicationOfItems(){
    this.data = this.data.filter((data: any, index: number) => data.id !== (this.data[index + 1]?.id));
}

Fundamentals / Mandatories

| Property/Method | Type | Description | | ----------------------- | :-----: | -------------------------------------- | | tableData | Array | Array of objects data/ table data | | columnName | string | To which field, you want to add filter | | onCheckBoxStatusChanged | method | On checkbox changes | | onUnselectAll | method | Emits on select All or Unselect All |

Future Plans

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

Author

Suraj Motwani - Email: [email protected]

License

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