Create a Search Pipe to Dynamically Filter results with Angular 4

Background

Angular JS (version 1.x) — Filters

In Angular JS there were Filters which allowed us to format and transform data. Angular JS came with a few built in Filters , such as:

• uppercase — converts “Hello” to “HELLO”
• lowercase — converts “Hello” to “hello”
• currency — converts 123 to $123.00

You can read more about them in the documentation.

A common built in Filter was called filter which took an array as input and returned a subset of that array based on the term we supplied the filter.

A very common use case of this is to have an input box where a user enters a search text and the results are filtered appropriately. Here’s some example code which does that:

app.html 
the list of characters we display in the ul is declared in the charactersCtrl as $scope.characters = ['Finn the human', 'Jake the dog', etc...]
<div ng-app="myApp" ng-controller="charactersCtrl">
<input ng-model="searchText" placeholder="enter search term here">
  <ul>
    <li ng-repeat="c in characters | filter : searchText">
      {{ c }}
    </li>
  </ul>
</div>

The code above users the filter Filter to return a subset of our characters array.

Here is the entire unfiltered list

After the user enters a search term, a subset of the list where the character name matches that search term is returned

Angular (version 2/4) — Pipes

A few things have changed in Angular. First of all, tools that allow us to transform data are no longer called Filters they are now called Pipes. You can view the official documentation for them here.

Angular comes with a few built in Pipes, many of them are the same as the ones that came with Angular JS. You can read more about them in the documentation.

However Angular did not come with the order by or filter pipes that were supplied in Angular JS. The reason for this can be found here. To summarize, these pipes are expensive…