The following shows that a pipe has higher precedence than a ternary operator. If the pipe precedence were lower than the ternary operator precedence, the output would be 'TRUE'. Instead it is: {{ true ? 'true' : 'false' | uppercase }}
+
The following shows that a pipe has higher precedence than a ternary operator. If the pipe precedence were lower than the ternary operator precedence, the output would be in uppercase as in 'TRUE'. Instead "true" is lowercase: {{ true ? 'true' : 'false' | uppercase }}
The following shows how parentheses help Angular evaluate the whole statement:
diff --git a/aio/content/examples/pipes/src/app/precedence.component.ts b/aio/content/examples/pipes/src/app/precedence.component.ts
index c4132c881f..e3afb1cc79 100644
--- a/aio/content/examples/pipes/src/app/precedence.component.ts
+++ b/aio/content/examples/pipes/src/app/precedence.component.ts
@@ -2,8 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-precedence',
- templateUrl: './precedence.component.html',
- styles: []
+ templateUrl: './precedence.component.html'
})
export class PrecedenceComponent {
diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md
index a76c91b879..30332a3786 100644
--- a/aio/content/guide/pipes.md
+++ b/aio/content/guide/pipes.md
@@ -100,13 +100,7 @@ The tabs in the following example demonstrates toggling between two different fo
-Clicking the **Toggle Format** button alternates the date format between **04/15/1988** and **Friday, April 15, 1988** as shown in Figure 1.
-
-
-
-
-
-**Figure 1.** Clicking the button toggles the date format
+Clicking the **Toggle Format** button alternates the date format between **04/15/1988** and **Friday, April 15, 1988**.
@@ -176,7 +170,6 @@ The following code example shows two component definitions:
It defines an argument to the `transform` method (`exponent`) for a parameter passed to the pipe.
* The `power-booster.component.ts` component demonstrates how to use the pipe, specifying a value (`2`) and the exponent parameter (`10`).
-Figure 2 shows the output.
-
-
-
+The browser displays the following:
-**Figure 2.** Output from the `exponentialStrength` pipe
+
+
+Power Booster
+
+Superpower boost: 1024
+
+
@@ -214,13 +211,7 @@ For example, you could change the previous custom pipe example to use two-way da
-The `exponentialStrength` pipe executes every time the user changes the "normal power" value or the "boost factor", as shown in Figure 3.
-
-
-
-
-
-**Figure 3.** Changing the amount and boost factor for the `exponentialStrength` pipe
+The `exponentialStrength` pipe executes every time the user changes the "normal power" value or the "boost factor".
Angular detects each change and immediately runs the pipe.
This is fine for primitive input values.
@@ -306,17 +297,11 @@ You can replace the array with a new array containing the newly changed elements
In the above example, you can create an array with the new hero appended, and assign that to `heroes`. Angular detects the change in the array reference and executes the pipe.
To summarize, if you mutate the input array, the pure pipe doesn't execute.
-If you *replace* the input array, the pipe executes and the display is updated, as shown in Figure 4.
-
-
-
-
-
-**Figure 4.** The `flyingHeroes` pipe filtering the display to flying heroes
+If you *replace* the input array, the pipe executes and the display is updated.
The above example demonstrates changing a component's code to accommodate a pipe.
-To keep your component simpler and independent of HTML templates that use pipes, you can, as an alternative, use an *impure* pipe to detect changes within composite objects such as arrays, as described in the next section.
+To keep your component independent of HTML templates that use pipes, you can, as an alternative, use an *impure* pipe to detect changes within composite objects such as arrays, as described in the next section.
{@a impure-flying-heroes}
@@ -423,13 +408,20 @@ In the above example, a breakpoint on the pipe's request for data shows the foll
* Each binding gets its own pipe instance.
* Each pipe instance caches its own URL and data and calls the server only once.
-The `fetch` and `fetch-json` pipes display the heroes as shown in Figure 5.
+The `fetch` and `fetch-json` pipes display the heroes in the browser as follows:
-
-
-
-
-
-