generic-list-filter v0.1.6
GenericListFilter
The simplest solution to club multiple filter's at one place in Angular.
This library was generated with Angular CLI version 10.1.6.
Quick Start
npm install generic-list-filter --save
Angular Version
This library is built to work with Angular 10+.
Simple Example
//app.module.ts
import { GenericListFilterModule } from 'generic-list-filter';// <-- import the module
@NgModule({
imports: [BrowserModule, GenericListFilterModule], // <-- include it in your app module
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class MyAppModule {}
//my.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'my-component',
template: `
<app-filter
[list]="filterList"
(onFilterChange)="filterChange($event)" >
</app-filter>
`
})
export class MyComponent {
filterList = {
country : ['India', 'USA', 'Japan', 'Australia'],
sector: ['IT', 'Agriculture', 'Medical']
//here you can add as many filters as you want.
};
//put this function in your ts file.
filterChange(appliedfilters) {
console.log(appliedfilters);
/*let you have selected India as country and IT sector.
you will get an object here i.e.
{ appliedFilterValues: {country: "India",sector: "IT"}
isFilter: true
}
*/
//now do your awesome filtering work here.
}
}
To place this filter in your HTML put this code into your html file.
<app-filter
[list]="filterList"
(onFilterChange)="filterChange($event)" >
</app-filter>
list
Object
it is an object in which we will pass our filters list.onFilterChange
event handler
The expression specified will be invoked whenever the filter will be applied via a click onApply
button in interface.
@Input() list;
@Output() onFilterChange = new EventEmitter();
To fix the button styling put this app-btn class into your styles.scss file.
you can modify this button styling as per your project requirement.
.app-btn {
height: 32px;
width: 110px;
background: #f28100;
border: none;
color: #fff;
outline: none;
cursor: pointer;
border-radius: 2px;
}
If you are facing list related alignment or hover UI issues please make sure you have this line into your styles.scss.
* {
box-sizing: border-box;
}
If you don't have font-awesome into your project don't forget to add.
To add font-awesome please paste below line into your index.html file.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
for cross-icon please download below image and name it as crossIcon.png and paste it at your assets/images location.
See Here a Final Demo What you will get.
Code scaffolding
Run ng generate component component-name --project generic-list-filter
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project generic-list-filter
.
Note: Don't forget to add
--project generic-list-filter
or else it will be added to the default project in yourangular.json
file.
Build
Run ng build generic-list-filter
to build the project. The build artifacts will be stored in the dist/
directory.
Publishing
After building your library with ng build generic-list-filter
, go to the dist folder cd dist/generic-list-filter
and run npm publish
.
Running unit tests
Run ng test generic-list-filter
to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.