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.