I am looking into how to filter an array of data in Angular2.
I looked into using a custom pipe, but I feel this is not what I am looking for, as it seems more geared towards simple presentation transformations rather then filtering large sets of data.
The array is set out as follows:
getLogs(): Array<Logs> {
return [
{ id: '1', plate: 'plate1', time: 20 },
{ id: '1', plate: 'plate2', time: 30 },
{ id: '1', plate: 'plate3', time: 30 },
{ id: '2', plate: 'plate4', time: 30 },
{ id: '2', plate: 'plate5', time: 30 },
{ id: '2', plate: 'plate6', time: 30 }
];
}
I want to filter this by id. So when I enter "1" into a search bar, it updates to display the corresponding values.
If there is a method on how to do this, I would love to know!
There is no way to do that using a default pipe. Here is the list of supported pipes by default: https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts.
That said you can easily add a pipe for such use case:
import {Injectable, Pipe} from 'angular2/core';
@Pipe({
name: 'myfilter'
})
@Injectable()
export class MyFilterPipe implements PipeTransform {
transform(items: any[], args: any[]): any {
return items.filter(item => item.id.indexOf(args[0]) !== -1);
}
}
And use it:
import { MyFilterPipe } from './filter-pipe';
(...)
@Component({
selector: 'my-component',
pipes: [ MyFilterPipe ],
template: `
<ul>
<li *ngFor="#element of (elements | myfilter:'123')">(...)</li>
</ul>
`
})
Hope it helps you, Thierry