I've tried to filter in Angular 2 app in version alpha 22. I've tried many ways how to do it but nothing works...

<table class="tabulka">
    <tr>
        <th>ID</th><th>Typ</th><th>Priorita</th><th>Aplikace</th><th>Souhrn</th><th>Hlásil</th><th>Stav</th><th>Termín</th><th>Akce</th>
    </tr>
    <tr *for="#x of datas">
        <td>{{x.ID}}</td>
        <td>{{x.Type}}</td>
        <td *if="x.Priority == 1" ><img src="./img/red.png"></td>
        <td *if="x.Priority == 0"></td>
        <td>{{x.Aplication}}</td>
        <td>{{x.Summary}}</td>
        <td>{{x.Person}}</td>
        <td>{{x.State}}</td>
        <td>{{x.Date}}</td>
        <td class="edit" id="{{x.ID}}"><a href="./editTicket.html">Upravit</a></td>
    </tr>
</table>

Please help! How do you do filtering in angular 2 using typescript?

In angular 1.4.x it works this way:

<table class="tabulka">
    <tr ng-repeat="x in datas| filter:searchText|filter:{Aplication:search}| filter:{Person:podle}">
        <td>{{x.ID}}</td>
        <td>{{x.Type}}</td>
        <td>{{x.Priority}}</td>
        <td>{{x.Aplication}}</td>
        <td>{{x.Summary}}</td>
        <td>{{x.Person}}</td>
        <td>{{x.State}}</td>
        <td>{{x.Date}}</td>
        <td class="edit" id="{{x.ID}}"><a href="./editTicket.html">Upravit</a></td>
    </tr>
</table>

I've tried to filter in Angular 2 app in version alpha 22. I've tried many ways how to do it but nothing works...

<table class="tabulka">
    <tr>
        <th>ID</th><th>Typ</th><th>Priorita</th><th>Aplikace</th><th>Souhrn</th><th>Hlásil</th><th>Stav</th><th>Termín</th><th>Akce</th>
    </tr>
    <tr *for="#x of datas">
        <td>{{x.ID}}</td>
        <td>{{x.Type}}</td>
        <td *if="x.Priority == 1" ><img src="./img/red.png"></td>
        <td *if="x.Priority == 0"></td>
        <td>{{x.Aplication}}</td>
        <td>{{x.Summary}}</td>
        <td>{{x.Person}}</td>
        <td>{{x.State}}</td>
        <td>{{x.Date}}</td>
        <td class="edit" id="{{x.ID}}"><a href="./editTicket.html">Upravit</a></td>
    </tr>
</table>

Please help! How do you do filtering in angular 2 using typescript?

In angular 1.4.x it works this way:

<table class="tabulka">
    <tr ng-repeat="x in datas| filter:searchText|filter:{Aplication:search}| filter:{Person:podle}">
        <td>{{x.ID}}</td>
        <td>{{x.Type}}</td>
        <td>{{x.Priority}}</td>
        <td>{{x.Aplication}}</td>
        <td>{{x.Summary}}</td>
        <td>{{x.Person}}</td>
        <td>{{x.State}}</td>
        <td>{{x.Date}}</td>
        <td class="edit" id="{{x.ID}}"><a href="./editTicket.html">Upravit</a></td>
    </tr>
</table>

• javascript
• angularjs
• angular
• angularjs-filter
• angular-pipe

Share Improve this question Follow edited Sep 3, 2019 at 23:30 solbs 1,06833 gold badges1616 silver badges3232 bronze badges asked Aug 28, 2015 at 9:19 Matěj MacháčekMatěj Macháček 2111 silver badge33 bronze badges 1

• See how to implement your own pipe (in angular2 filters are called pipes). You'll have to implement your own filter pipe since there is no a default one. – Eric Martinez Commented Aug 28, 2015 at 16:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

In angular 2.0.0-beta.0, you'll need to implement a pipe that transform the array depending on your application needs,

@Pipe({
  name: 'search'
})

export class SearchTextPipe implements PipeTransform {
   transform(value: any[] , args: any[]) {
     const searchText = args[0];
     const field = args[1];
     if (!searchText) {
       return value;
     }
     return value.filter ((item) => {
        if (field) {
         return item[field].includes(searchText);
       }
       return _(item)
        .values()
        .includes( searchText );
    })  
  }
}

Then you can use it in other ponents:

@Component({
  ...
  pipes: [SearchTextPipe]
})

and in the template:

*ngFor="#item of list | search:searchInput:field"

Go to the console and type

ng generate pipe filter

Then go edit the newly created file (src/app/filter.pipe.ts) and replace

transform(value: any, args?: any): any {
    return null;
}

by

transform(value: any, args?: any): any {
    if (!value || !args) return value;
    if (typeof args == "string"){
        return value.filter(item => item.toLowerCase().indexOf(args.toLowerCase()) !== -1);
    } else {
        let key = Object.keys(args)[0];
        return value.filter(item => item[key].toLowerCase().indexOf(args[key].toLowerCase()) !== -1);
    }
}

Usage

Now, you can use your filter as follow

// app.ponent.ts
list = ["Hello", "Hi and hello", "Bonjour"];
list_of_objects = [
    { id: 0, content: "Hello" },
    { id: 1, content: "Hi and hello" },
    { id: 2, content: "Bonjour" }
];

// app.ponent.html
<p>Simple array</p>
<ul>
    <li *ngFor="let item of list | filter:'hello' ">{{ item }}</li>
</ul>
<p>Array of JSONs</p>
<ul>
    <li *ngFor="let item of list_of_objects | filter:{ content:'hello' } ">{{ item.title }}</li>
</ul>

And all of that will display :

---

Simple array

• Hello
• Hi and hello

Array of JSONs

• Hello
• Hi and hello

You have to write *ng-for="#x of datas" and *ng-if="x.Priority == 1""

<table class="tabulka"> <tr>
            <th>ID</th><th>Typ</th><th>Priorita</th><th>Aplikace</th><th>Souhrn</th><th>Hlásil</th><th>Stav</th><th>Termín</th><th>Akce</th> </tr> <tr *ng-for="#x of datas">
            <td>{{x.ID}}</td>
            <td>{{x.Type}}</td>
            <td *ng-if="x.Priority == 1" ><img src="./img/red.png"></td>
            <td *ng-if="x.Priority == 0"></td>
            <td>{{x.Aplication}}</td>
            <td>{{x.Summary}}</td>
            <td>{{x.Person}}</td>
            <td>{{x.State}}</td>
            <td>{{x.Date}}</td>
            <td class="edit" id="{{x.ID}}"><a href="./editTicket.html">Upravit</a></td> </tr>

I played around with the code below. i was looking for the same search function. But for now this fits my needs. Still want to find a way the make the pipe dynamic. Maybe you find the solutions for this one.

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'filterByDone',
    pure: false,
})

export class SearchPipe {

    transform (value, [queryString]) {
        if (value==null) {
            return null;
        }

        return value.filter((todo)=> todo.done !== '1')
    }
}

Basicly, add a function to trigger search box textvalue changed. Inside the function, create a for loop to add matched data.

TextChanged(searchText){
    var filteredList = [];
    For(let item of this.oldList){
        If(item.contains(seaechText))
            FilteredList.push(item);
        }
    This.oldList = filteredList;
    }
}