anchor.diff:  :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, 
  +
  +  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. 
  +
  +  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. 
  +  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. 
  +    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. 
  +  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.
  -  
  -  If follows that we must implement an impure pipe with great care. 
  +
  +  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', 
  +  '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. 
  +  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 
  +  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.
  
positive.code:   (e.g., `hero['name']`).
    Unfortunately, aggressive minification *munges* the `Hero` property names so that `Hero.name` and `Hero.planet`
    becomes something like `Hero.a` and `Hero.b`. Clearly `hero['name']` is not going to work.
    
    Some of us may not care to minify this aggressively. That's *our* choice.
    But the Angular product should not prevent someone else from minifying aggressively.
    Therefore, the Angular team decided that everything shipped in Angular will minify safely.
    
    The Angular team and many experienced Angular developers strongly recommend that you move
    filtering and sorting logic into the component itself. 
    The component can expose a `filteredHeroes` or `sortedHeroes` property and take control
    over when and how often to execute the supporting logic. 
    Any capabilities that you would have put in a pipe and shared across the app can be 
    written in a filtering/sorting service and injected into the component.
    
    If these performance and minification considerations do not apply to you, you can always create your own such pipes 
    (along the lines of the [FlyingHeroesPipe](#impure-flying-heroes)) or find them in the community.
    
negative.code: :marked
    The parameter value can be any valid
    [template expression](./template-syntax.html#template-expressions)
    such as a string literal or a component property.
    In other words, we can control the format through a binding the same way we control the birthday value through a binding.
  
    Let's write a second component that *binds* the pipe's format parameter
    to the component's `format` property. Here's the template for that component:
  +makeExample('pipes/ts/app/hero-birthday2.component.ts', 'template', 'app/hero-birthday2.component.ts (template)')(format=".")
  