angular filter ngfor

Solutions on MaxInterview for angular filter ngfor by the best coders in the world

showing results for - "angular filter ngfor"
Eric
24 Nov 2018
1// In your component:
2filterargs = {title: 'hello'};
3items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];
4In your template, you can pass string, number or object to your pipe to use to filter on:
5
6// In your .html:
7<li *ngFor="let item of items | myfilter:filterargs">
8
9// In your pipe:
10import { Pipe, PipeTransform } from '@angular/core';
11
12@Pipe({
13    name: 'myfilter',
14    pure: false
15})
16export class MyFilterPipe implements PipeTransform {
17    transform(items: any[], filter: Object): any {
18        if (!items || !filter) {
19            return items;
20        }
21        // filter items array, items which match and return true will be
22        // kept, false will be filtered out
23        return items.filter(item => item.title.indexOf(filter.title) !== -1);
24    }
25}
26
27// Remember to register your pipe in app.module.ts; 
28// you no longer need to register the pipes in your @Component
29import { MyFilterPipe } from './shared/pipes/my-filter.pipe';
30
31@NgModule({
32    imports: [
33        ..
34    ],
35    declarations: [
36        MyFilterPipe,
37    ],
38    providers: [
39        ..
40    ],
41    bootstrap: [AppComponent]
42})
43export class AppModule { }