parent
21d74d531a
commit
06f8002417
|
@ -16,7 +16,7 @@ block includes
|
|||
We almost think of them as styles.
|
||||
In fact, we'd like to apply them in our HTML templates as we do styles.
|
||||
p.
|
||||
Welcome, Angular pipes, the simple display-value transformations that we can declare in our HTML!
|
||||
Introducing Angular pipes, a way to write display-value transformations that we can declare in our HTML!
|
||||
Try the #[+liveExampleLink2()].
|
||||
|
||||
.l-main-section
|
||||
|
@ -25,7 +25,7 @@ p.
|
|||
|
||||
A pipe takes in data as input and transforms it to a desired output.
|
||||
We'll illustrate by transforming a component's birthday property into
|
||||
a human-friendly date:
|
||||
a human-friendly date.
|
||||
|
||||
+makeExample('pipes/ts/app/hero-birthday1.component.ts', null, 'app/hero-birthday1.component.ts')(format='.')
|
||||
|
||||
|
@ -62,7 +62,7 @@ p.
|
|||
(e.g., `currency:'EUR'`). If our pipe accepts multiple parameters, we separate the values with colons (e.g. `slice:1:5`)
|
||||
|
||||
We'll modify our birthday template to give the date pipe a format parameter.
|
||||
After formatting the hero's April 15th birthday, it should render as **<samp>04/15/88</samp>**.
|
||||
After formatting the hero's April 15th birthday, it should render as **<samp>04/15/88</samp>**:
|
||||
|
||||
+makeExample('pipes/ts/app/app.component.html', 'format-birthday')(format=".")
|
||||
|
||||
|
@ -103,7 +103,7 @@ figure.image-display
|
|||
We can chain pipes together in potentially useful combinations.
|
||||
In the following example, we chain the birthday to the `DatePipe` and on to the `UpperCasePipe`
|
||||
so we can display the birthday in uppercase. The following birthday displays as
|
||||
**<samp>APR 15, 1988</samp>**
|
||||
**<samp>APR 15, 1988</samp>**.
|
||||
|
||||
+makeExample('pipes/ts/app/app.component.html', 'chained-birthday')(format=".")
|
||||
|
||||
|
@ -123,7 +123,7 @@ figure.image-display
|
|||
+makeExample('pipes/ts/app/exponential-strength.pipe.ts', null, 'app/exponential-strength.pipe.ts')(format=".")
|
||||
|
||||
:marked
|
||||
This pipe definition reveals several key points
|
||||
This pipe definition reveals several key points:
|
||||
|
||||
* A pipe is a class decorated with pipe metadata.
|
||||
|
||||
|
|
Loading…
Reference in New Issue