Ngx Filter Btn

Simple to implement filter button that filters your data.

Demo Link

Index

• Installation Steps
• Installation Example
• Parameters Available
• Available Conditions
• Styling the component

Installation Steps

1. Install by running npm install ngx-table-operations
2. Add import { NgxFilterBtnModule } from 'ngx-filter-btn' in your module class.
3. Add NgxFilterBtnModule in your module class.
4. Add <ngx-filter-btn [data]="yourData" (filtered)="yourData = $event">Your button name</ngx-filter-btn> in your component html.

Installation Example

1. Install by running npm install ngx-table-operations

2. In app.module.ts file.

   import { NgxFilterBtnModule } from 'ngx-filter-btn';
   
   @NgModule({
   ....
   imports: [NgxFilterBtnModule, ....],
   ....
   ....
   })
   

3. In app.component.html file.

   <ngx-filter-btn
           [data]="userList"
           [numberKeys]="['empId', 'salary', 'fte']"
           [booleanKeys]="['isNewJoiner']"
           [dateKeys]="['dateOfJoining']"
           (filtered)="userList = $event"
         >
           Filter
   </ngx-filter-btn>
   

4. Some sample data in app.component.ts file.

   export class AppComponent {
   
   userList: SampleData[] = [];
   constructor() {
       this.userList = [
       {
           empId: 7151,
           name: 'Jarret Chesson',
           email: '[e-mail]',
           gender: 'M',
           assetType: 'Desktop',
           assetDetail: 'VXYJ59531',
           dateOfJoining: '11-04-2017',
           salary: 68093,
           isNewJoiner: true,
           grade: 'A3',
           location: 'Kolkata',
           skills: 'Java',
           billablityStatus: 'DEPLOYABLE_BENCH',
           accountName: 'Hudson LLC',
           projectName: 'Span',
           fte: 75,
         },
         { ..... },
         { ..... }
   
       }
   }
   

Parameters Available

Type	Name	Description	Data Type	Example
@Input	data	Pass your actual data of array in it	any[]	[data]="userList"
@Input	numberKeys	Pass keys who has data of type number so that number filters can be applied	string[]	[numberKeys]="['empId','salary']"
@Input	booleanKeys	Pass keys who has data of type boolean so that boolean filters can be applied	string[]	[booleanKeys]="['isNewJoiner']"
@Input	dateKeys	Pass keys who has data of type Date so that Date filters can be applied	string[]	[dateKeys]="['dateOfJoining']"
@Output	filtered	Returns the filtered array of your data in $event		(filtered)="userList = $event"

Available Conditions

1. String Conditions
   • contains
   • does not contain
   • starts with
   • ends with
   • is
   • is not
   • is empty
   • is not empty
2. Number & Date Conditions
   • =
   • !=
   • >
   • <
   • >=
   • <=
   • is empty
   • is not empty
3. Boolean Conditions
   • true
   • false
   • is empty
   • is not empty

Styling the component

• The css class names are same as bootstrap classes.
• Customizing the css is simple.
• You can find all the css classes I used here.
• Use the same class name in style.css to override according to your css.

If you want to keep the css to component only, then use :host ::ng-deep before declaring the css class.

Example :

:host ::ng-deep .dropdown-menu{
        background-color: white
    }