w-ng5

Angular Generic Filters to *ngFor

  • w-ng5

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
w-ng5
201.1.06 years ago6 years agoMinified + gzip package size for w-ng5 in KB

Readme

w-ng5 accelerator web components
Angular Generic Filters to ngFor
Objective
Filter records of your listings with simple strings using a single field or multiple fields on plan objects. Filter also by using fields in non-plan structured objects by observing one or more attributes or sub-attributes of these objects by browsing their OGNL properties.
Details
Details about this project and user tutorial

Composition package

  • Generic Filter for using in directives ngFor

How to install and configure

For use this components, before, install this package with npm:
npm install w-ng5 --save
After, import module in app.module
...
import { PipesModule } from 'w-ng5';
In the next step, add in declare section of app.module:
imports: [
PipesModule,
...
]
And, enjoy....

Sample use

Filtering simple string

<input type="text"  [(ngModel)]="filtroString">
<ul>
<li *ngFor="let s of getStrings() | filter:filtroString">
{{s}}
</li>
</ul>

Filtering complex string - field 'Value' in level 2

<input type="text"  [(ngModel)]="search">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>

Filtering complex string - middle field - 'Value' in level 1

<input type="text"  [(ngModel)]="search3">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.valor1', value: search3}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>

Filtering complex array simple - field 'Nome' level 0

<input type="text"  [(ngModel)]="search2">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'nome', value: search2}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>

Filtering in tree fields - field 'Valor' in level 2 or 'Valor' in level 1 or 'Nome' in level 0

<input type="text"  [(ngModel)]="search5">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search5}, {field:'n1.valor1', value: search5}, {field:'nome', value: search5}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>

Filtering nonexistent field - 'Valor' in nonexistent level 3

<input type="text"  [(ngModel)]="search4">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.n3.valor3', value: search4}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>

Filtering using inject FilterPipe in constructor of component

TypeScript method:

Define a provider:
// Import component to use in this code
import { FilterPipe } from 'w-ng5';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [FilterPipe]
})
If your prefer, import component in the provider section of app.module Then import the pipe into the component constructor ...
constructor(private pipe: FilterPipe) {}
And, create a method 'dataSource(param)' that will return a array of data to view
public dataSource(textFilter) {
const r = this.pipe.transform(this.getComplexTypesExtends(),
[{field: 'n1.n2.valor2', value: textFilter}]);
return r;
}
... after, using this method 'dataSource(param)' on ngFor directive in the template html:
<input type="text"  [(ngModel)]="search5">
<ul>
<li *ngFor="let s of dataSource(search5)">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
This component work with infinite attribute level...
Project info - source code
This project is stored in WNg5
and was generated with Angular CLI version 1.6.6.