0.0.1 • Published 3 years ago
ngx-filter-btn v0.0.1
Ngx Filter Btn
Simple to implement filter button that filters your data.
Index
Installation Steps
- Install by running
npm install ngx-table-operations
- Add
import { NgxFilterBtnModule } from 'ngx-filter-btn'
in your module class. - Add
NgxFilterBtnModule
in your module class. - Add
<ngx-filter-btn [data]="yourData" (filtered)="yourData = $event">Your button name</ngx-filter-btn>
in your component html.
Installation Example
- Install by running
npm install ngx-table-operations
In
app.module.ts
file.import { NgxFilterBtnModule } from 'ngx-filter-btn'; @NgModule({ .... imports: [NgxFilterBtnModule, ....], .... .... })
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>
Some sample data in
app.component.ts
file.export class AppComponent { userList: SampleData[] = []; constructor() { this.userList = [ { empId: 7151, name: 'Jarret Chesson', email: 'jchessona8@illinois.edu', 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
- String Conditions
contains
does not contain
starts with
ends with
is
is not
is empty
is not empty
- Number & Date Conditions
=
!=
>
<
>=
<=
is empty
is not empty
- 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
}
0.0.1
3 years ago