title: Why angular 2 "Filters" are called "Pipe"?
body: <p>In <a href="https://angularjs.org/" rel="nofollow noreferrer">Angular 1</a>, when we want to format the value of an expression for display to the user we use angular <a href="https://docs.angularjs.org/api/ng/filter/filter" rel="nofollow noreferrer">Filters</a>. In <a href="http://angular.io" rel="nofollow noreferrer">Angular 2</a>, We use <a href="https://angular.io/docs/ts/latest/guide/pipes.html" rel="nofollow noreferrer">Pipe</a> for the same.</p>
  
  <p><strong>Angular 1 Filters:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt; {{ greetings | reverse }}&lt;/p&gt;
  </code></pre>
  
  <p>Js:</p>
  
  <pre><code>app.filter('reverse', function() {
    return function(input, uppercase) {
      input = input || '';
      var out = '';
      for (var i = 0; i &lt; input.length; i++) {
        out = input.charAt(i) + out;
      }
      // conditional based on optional argument
      if (uppercase) {
        out = out.toUpperCase();
      }
      return out;
    };
  });
  </code></pre>
  
  <p><strong>Angular 2</strong>:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt; {{ greetings | reverse }}&lt;/p&gt;
  </code></pre>
  
  <p>TypeScript:</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({name: 'reverse'})
  export class ReversePipe {
    transform(input:string): string {
      input = input || '';
      let out = '';
      for (var i = 0; i &lt; input.length; i++) {
        out = input.charAt(i) + out;
      }
      return out;
    }
  }
  </code></pre>
  
  <p>By looking at code, one can conclude that both does the same thing. Both have same roles and responsibility. What I want to know is <strong>Why they are renamed to Pipe in Angular 2?</strong></p>