Search code examples
javascriptangularangular5ecmascript-5es5-shim

Using Angular ES5 to create filters


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() {

    }
});

Solution

  • 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