anchor.diff:  :marked
     <a id="pipe"></a>
     ### The pipe operator ( | )
  +  Pipes are simple functions that accept an input value and return a transformed value.
     The result of an expression might require some transformation before we’re ready to use it in a binding.  For example, we might want to display a number as a currency, force text to uppercase, or filter a list and sort it.
   
  -  Angular [pipes](./pipes.html) are a good choice for small transformations such as these.
  -  Pipes are simple functions that accept an input value and return a transformed value.
  -  They're easy to apply within template expressions, using the **pipe operator (`|`)**:
  +  Angular [pipes](./pipes.html) are a good choice for small transformations such as those listed above.
  +  Pipe operators are easy to apply within template expressions, using the **pipe operator (`|`)**:
   +makeExample('template-syntax/ts/app/app.component.html', 'pipes-1')(format=".")
   :marked
     The pipe operator passes the result of an expression on the left to a pipe function on the right.
  
positive.code:   We can chain expressions through multiple pipes:
  +makeExample('template-syntax/ts/app/app.component.html', 'pipes-2')(format=".")
  :marked
    And we can also [apply parameters](./pipes.html#parameterizing-a-pipe) to a pipe:
  +makeExample('template-syntax/ts/app/app.component.html', 'pipes-3')(format=".")
  
  block json-pipe
  
negative.code: +makeExample('template-syntax/ts/app/app.component.html', 'safe-1')(format=".")
  :marked
    The view still renders but the displayed value is blank; we see only "The title is" with nothing after it.
    That is reasonable a behavior. At least the app doesn't crash.
  
    Suppose the template expression involves a property path, as seen in this next example
    where we’re displaying the `firstName` of a null hero:
  
  code-example(language="html").
    The null hero's name is {{nullHero.firstName}}
  