File tree Expand file tree Collapse file tree 2 files changed +22
-6
lines changed Expand file tree Collapse file tree 2 files changed +22
-6
lines changed Original file line number Diff line number Diff line change 1+ # Using a pipe in a template
2+
3+ To apply a pipe, use the pipe operator (` | ` ) within a template expression as shown in the following code example.
4+
5+ <code-example header =" birthday.component.html (template) " path =" pipes/src/app/birthday.component.html " ></code-example >
6+
7+ The component's ` birthday ` value flows through the pipe operator (` | ` ) to the [ ` DatePipe ` ] ( api/common/DatePipe ) whose pipe name is ` date ` .
8+ The pipe renders the date in the default format as ** Apr 15, 1988** .
9+
10+ Look at the component class.
11+
12+ <code-example header =" birthday.component.ts (class) " path =" pipes/src/app/birthday.component.ts " ></code-example >
13+
14+ Because this is a [ standalone component] ( guide/standalone-components ) , it imports the ` DatePipe ` from ` @angular/common ` , the source of all built-in pipes.
15+
16+ @reviewed 2023-08-14
Original file line number Diff line number Diff line change 1- # Using a pipe in a template
1+ # テンプレート内でのパイプの使用
22
3- To apply a pipe, use the pipe operator (` | ` ) within a template expression as shown in the following code example.
3+ パイプを適用するために、次のコードの例に示されるように、テンプレート式内部でパイプ演算子 (` | ` )を使用します。
44
55<code-example header =" birthday.component.html (template) " path =" pipes/src/app/birthday.component.html " ></code-example >
66
7- The component's ` birthday ` value flows through the pipe operator (` | ` ) to the [ ` DatePipe ` ] ( api/common/DatePipe ) whose pipe name is ` date ` .
8- The pipe renders the date in the default format as ** Apr 15, 1988** .
7+ ` birthday ` の値はパイプ演算子 (` | ` )を通じてnameが ` date ` の [ ` DatePipe ` ] ( api/common/DatePipe ) に流れます。
8+ パイプはdateをデフォルトフォーマットの ** Apr 15, 1988** に変換します。
99
10- Look at the component class.
10+ コンポーネントクラスを見てください。
1111
1212<code-example header =" birthday.component.ts (class) " path =" pipes/src/app/birthday.component.ts " ></code-example >
1313
14- Because this is a [ standalone component ] ( guide/standalone-components ) , it imports the ` DatePipe ` from ` @angular/common ` , the source of all built-in pipes.
14+ これは [ スタンドアロンコンポーネント ] ( guide/standalone-components ) のため、すべての組み込みパイプの源である ` @angular/common ` から ` DatePipe ` をインポートします。
1515
1616@reviewed 2023-08-14
You can’t perform that action at this time.
0 commit comments