I've created a project using Angular v 4.4.4 in ES5 and I'm having difficulties making a pipe filter to filter table results (*ngFor is used to populate the table). Ive searched all over and was not able to find an example. is this possible to do and if so can someone provide me with an example?
Here is my incomplete code attempt so far
var SearchFilter = ng.core
.Pipe({
name: "searchFilterTable"
})
.Class({
constructor: function SearchFilter () {},
transform: function() {
}
});
Found a solution:
ES5
var SearchFilter = ng.core.Pipe({
name: "searchFilterTable"
})
.Class({
constructor: function SearchFilter () {},
transform: function(elements, string) {
console.log(elements);
console.log(string);
return elements.filter(
item => item.name.toLowerCase().indexOf(string.toLowerCase()) !== -1);
}
});
Html
<tr *ngFor='let gateway of gateways | searchFilterTable:keyword'>
<td class="special-td">{{ gateway.name }}<br><a>(edit)</a></td>
<td class="special-td">{{ gateway.type }}</td>
<td class="special-td">{{ gateway.forwardingAddress }}</td>
<td class="special-td copy">{{ gateway.key }}</td>
<td class="special-td"></td>
</tr>
Make sure to add the Pipe into your declarations/imports