From d0811714d54cda1882f8287e095bf182ce39421d Mon Sep 17 00:00:00 2001 From: amandaegraham Date: Tue, 19 Jul 2016 23:43:50 -0400 Subject: [PATCH] Template Expression Operators Copy Edit Waterloo ENGL 210 J Student Changed order of text in pipe operator to introduce pipe operator Changed word choice/word location in pope operator Added : before examples to keep consistent --- .../docs/ts/latest/guide/template-syntax.jade | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 3442567e9a..a515d81ca6 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -1401,11 +1401,11 @@ h3#aliasing-io Aliasing input/output properties :marked ### 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. @@ -1413,7 +1413,7 @@ h3#aliasing-io Aliasing input/output properties 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: + 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 @@ -1421,7 +1421,7 @@ block json-pipe The `json` pipe is particularly helpful for debugging our bindings: +makeExample('template-syntax/ts/app/app.component.html', 'pipes-json')(format=".") :marked - The generated output would look something like this + The generated output would look something like this: code-example(language="json"). { "firstName": "Hercules", "lastName": "Son of Zeus", "birthdate": "1970-02-25T08:00:00.000Z", @@ -1433,7 +1433,7 @@ block json-pipe ### The safe navigation operator ( ?. ) and null property paths The Angular **safe navigation operator (`?.`)** is a fluent and convenient way to guard against null and undefined values in property paths. - Here it is, protecting against a view render failure if the `currentHero` is null. + Here it is used to protect against against a view render failure if the `currentHero` is null: +makeExample('template-syntax/ts/app/app.component.html', 'safe-2')(format=".") block dart-safe-nav-op @@ -1446,10 +1446,10 @@ block dart-safe-nav-op +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 behavior. At least the app doesn't crash. + That is reasonable a behavior. At least the app doesn't crash. - Suppose the template expression involves a property path, as in this next example - where we’re displaying the `firstName` of a null hero. + 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}}