anchor.diff:  +makeExample('pipes/ts/app/random-pipe.component.ts', 'pipe','app/random-pipe.component.ts (pipe)')(format='.')
   :marked
     When the input changes, it outputs a new value albeit never the same value for the same input.
  -  
  +
     Remember *purity in a pipe has nothing to do with pure functions!*
  -  
  +
     *Pipe purity* is more about the purity of the input values than of the pipe itself.
   
   .l-main-section
  
positive.code:   :marked
      Learn more about these and many other built-in pipes in the  the [API Reference](../api/#!?apiFilter=pipe);
      filter for entries that include the word "pipe".
      
      Angular 2 doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in an [appendix below](#no-filter-pipe)
  
  .l-main-section
  
negative.code: :marked
    Replacing the array is an efficient way to signal to Angular that it should update the display.
    When do we replace the array? When the data change.
  
    That's an easy rule to follow in *this toy* example
    where the only way to change the data is by adding a new hero.
  
    More often we don't know when the data have changed,
    especially in applications that mutate data in many ways,
    perhaps in application locations far away.
    A component is such an application usually can't know about those changes.
  
    Moreover, it's unwise to distort our component design to accommodate a pipe.
    We strive as much as possible to keep the component class independent of the HTML.
    The component should be unaware of pipes.
  
    Perhaps we should consider a different kind of pipe for filtering flying heroes, an *impure pipe*.
  
  .l-main-section
  :marked
    ## Pure and Impure Pipes
  
    There are two categories of pipes: **pure** and **impure**.
  
    Pipes are pure by default.  Every pipe we've seen so far has been pure.
  
    We make a pipe impure by setting its pure flag to false. We could make the `FlyingHeroesPipe`
    impure with a flip of the switch:
  
  +makeExample('pipes/ts/app/flying-heroes.pipe.ts', 'pipe-decorator')(format='.')
  :marked
    Before we do that, let's understand the difference between *pure* and *impure*, starting with a *pure* pipe.
  
    ### Pure pipes
  
    Angular executes a *pure pipe* only when it detects a *pure change* to the input value.
  
    A *pure change* is *either* a change to a primitive input value (`String`, `Number`, `Boolean`, `Symbol`)
    *or* a changed object reference (`Date`, `Array`, `Function`, `Object`).
  
    Angular ignores changes *within* the object itself.
    It won't call a pure pipe if we change the input month, add to the input array, or update an input object property.
  
    This may seem restrictive but is is also fast.
    An object reference check is fast ... much faster than a deep check for differences.
    ... so Angular can quickly determine if it can skip both the pipe execution and a screen update.
  
    For this reason, we prefer a pure pipe if we can live with the change detection strategy.
    When we can't, we *may* turn to the impure pipe.
  
  .l-sub-section
    :marked
      Or we might not use a pipe at all.
      It may be better to pursue the pipe's purpose with a property of the component,
      a point we take up later.
  :marked
    ### Impure pipes
    Angular executes an *impure pipe*  during *every* component change detection cycle.
    An impure pipe will be called a lot, as often as every keystroke or mouse-move.
  
    With that concern in mind, we must implement an impure pipe with great care.
    An expensive, long-running pipe could destroy the user experience.
  
    <a id="impure-flying-heroes"></a>
    ### An impure *FlyingHeroesPipe*
  
    A flip of the switch turns our `FlyingHeroesPipe` into a `FlyingHeroesImpurePipe`.
    Here's the complete implementation:
  +makeTabs(
    'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts',
    'impure, pure',
    'FlyingHeroesImpurePipe, FlyingHeroesPipe')(format='.')
  :marked
    We inherit from `FlyingHeroesPipe` to prove the point that nothing changed internally.
    The only difference is the `pure` flag in the pipe metadata.
  
    This is a good candidate for an impure pipe because the `transform` function is trivial and fast.
  +makeExample('pipes/ts/app/flying-heroes.pipe.ts','filter')(format='.')
  
    We can derive a `FlyingHeroesImpureComponent` that we derive from the `FlyingHeroesComponent`.
  +makeExample('pipes/ts/app/flying-heroes.component.ts','impure-component','app/flying-heroes.component.ts (FlyingHeroesImpureComponent)')(format='.')
  :marked
    The only substantive change is the pipe.
    We can confirm in the [live example](/resources/live-examples/pipes/ts/plnkr.html)
    that the *flying heroes* display updates as we enter new heroes even when we mutate the `heroes` array.
  
    <a id="async-pipe"></a>
    ### The impure *AsyncPipe*
    The Angular `AsyncPipe` is an interesting example of an impure pipe.
    The `AsyncPipe` accepts a `Promise` or `Observable` as input
    and subscribes to the input automatically, eventually returning the emitted value(s).
  
    It is also stateful.
    The pipe maintains a subscription to the input `Observable` and
    keeps delivering values from that `Observable` as they arrive.
  
    In this next example, we bind an `Observable` of message strings (`messages$`) to a view with the `async` pipe.
  