Revert "Template Expression Operators Copy Edit "
This reverts commit d0811714d5
.
This commit is contained in:
parent
14bd476d89
commit
66984d5fc8
|
@ -1401,11 +1401,11 @@ h3#aliasing-io Aliasing input/output properties
|
||||||
:marked
|
:marked
|
||||||
<a id="pipe"></a>
|
<a id="pipe"></a>
|
||||||
### The pipe operator ( | )
|
### 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.
|
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 those listed above.
|
Angular [pipes](./pipes.html) are a good choice for small transformations such as these.
|
||||||
Pipe operators are easy to apply within template expressions, using the **pipe operator (`|`)**:
|
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 (`|`)**:
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-1')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-1')(format=".")
|
||||||
:marked
|
:marked
|
||||||
The pipe operator passes the result of an expression on the left to a pipe function on the right.
|
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:
|
We can chain expressions through multiple pipes:
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-2')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-2')(format=".")
|
||||||
:marked
|
:marked
|
||||||
We can also [apply parameters](./pipes.html#parameterizing-a-pipe) to a pipe:
|
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=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-3')(format=".")
|
||||||
|
|
||||||
block json-pipe
|
block json-pipe
|
||||||
|
@ -1421,7 +1421,7 @@ block json-pipe
|
||||||
The `json` pipe is particularly helpful for debugging our bindings:
|
The `json` pipe is particularly helpful for debugging our bindings:
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-json')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-json')(format=".")
|
||||||
:marked
|
:marked
|
||||||
The generated output would look something like this:
|
The generated output would look something like this
|
||||||
code-example(language="json").
|
code-example(language="json").
|
||||||
{ "firstName": "Hercules", "lastName": "Son of Zeus",
|
{ "firstName": "Hercules", "lastName": "Son of Zeus",
|
||||||
"birthdate": "1970-02-25T08:00:00.000Z",
|
"birthdate": "1970-02-25T08:00:00.000Z",
|
||||||
|
@ -1433,7 +1433,7 @@ block json-pipe
|
||||||
### The safe navigation operator ( ?. ) and null property paths
|
### 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.
|
The Angular **safe navigation operator (`?.`)** is a fluent and convenient way to guard against null and undefined values in property paths.
|
||||||
Here it is used to protect against against a view render failure if the `currentHero` is null:
|
Here it is, protecting against a view render failure if the `currentHero` is null.
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'safe-2')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'safe-2')(format=".")
|
||||||
|
|
||||||
block dart-safe-nav-op
|
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=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'safe-1')(format=".")
|
||||||
:marked
|
:marked
|
||||||
The view still renders but the displayed value is blank; we see only "The title is" with nothing after it.
|
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.
|
That is reasonable behavior. At least the app doesn't crash.
|
||||||
|
|
||||||
Suppose the template expression involves a property path, as seen in this next example
|
Suppose the template expression involves a property path, as in this next example
|
||||||
where we’re displaying the `firstName` of a null hero:
|
where we’re displaying the `firstName` of a null hero.
|
||||||
|
|
||||||
code-example(language="html").
|
code-example(language="html").
|
||||||
The null hero's name is {{nullHero.firstName}}
|
The null hero's name is {{nullHero.firstName}}
|
||||||
|
|
Loading…
Reference in New Issue