@@ -16,7 +16,7 @@ block includes
16
16
We almost think of them as styles.
17
17
In fact, we'd like to apply them in our HTML templates as we do styles.
18
18
p.
19
- Welcome, Angular pipes, the simple display-value transformations that we can declare in our HTML!
19
+ Introducing Angular pipes, a way to write display-value transformations that we can declare in our HTML!
20
20
Try the #[ + liveExampleLink2()] .
21
21
22
22
.l-main-section
25
25
26
26
A pipe takes in data as input and transforms it to a desired output.
27
27
We'll illustrate by transforming a component's birthday property into
28
- a human-friendly date:
28
+ a human-friendly date.
29
29
30
30
+ makeExample('pipes/ts/app/hero-birthday1.component.ts' , null , 'app/hero-birthday1.component.ts' )( format ='.' )
31
31
62
62
(e.g., `currency:'EUR'`). If our pipe accepts multiple parameters, we separate the values with colons (e.g. `slice:1:5`)
63
63
64
64
We'll modify our birthday template to give the date pipe a format parameter.
65
- After formatting the hero's April 15th birthday, it should render as **<samp>04/15/88</samp>**.
65
+ After formatting the hero's April 15th birthday, it should render as **<samp>04/15/88</samp>**:
66
66
67
67
+ makeExample('pipes/ts/app/app.component.html' , 'format-birthday' )( format ="." )
68
68
@@ -103,7 +103,7 @@ figure.image-display
103
103
We can chain pipes together in potentially useful combinations.
104
104
In the following example, we chain the birthday to the `DatePipe` and on to the `UpperCasePipe`
105
105
so we can display the birthday in uppercase. The following birthday displays as
106
- **<samp>APR 15, 1988</samp>**
106
+ **<samp>APR 15, 1988</samp>**.
107
107
108
108
+ makeExample('pipes/ts/app/app.component.html' , 'chained-birthday' )( format ="." )
109
109
@@ -123,7 +123,7 @@ figure.image-display
123
123
+ makeExample('pipes/ts/app/exponential-strength.pipe.ts' , null , 'app/exponential-strength.pipe.ts' )( format ="." )
124
124
125
125
:marked
126
- This pipe definition reveals several key points
126
+ This pipe definition reveals several key points:
127
127
128
128
* A pipe is a class decorated with pipe metadata.
129
129
0 commit comments