5 lines
42 KiB
JSON
5 lines
42 KiB
JSON
|
{
|
||
|
|
"id": "guide/pipes",
|
||
|
|
"title": "Transforming Data Using Pipes",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/pipes.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"transforming-data-using-pipes\">Transforming Data Using Pipes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/pipes#transforming-data-using-pipes\"><i class=\"material-icons\">link</i></a></h1>\n<p>Use <a href=\"guide/glossary#pipe\" title=\"Definition of a pipe\">pipes</a> to transform strings, currency amounts, dates, and other data for display.\nPipes are simple functions you can use in <a href=\"/guide/glossary#template-expression\" title=\"Definition of template expression\">template expressions</a> to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.\nFor example, you would use a pipe to show a date as <strong>April 15, 1988</strong> rather than the raw string format.</p>\n<div class=\"alert is-helpful\">\n<p> For the sample app used in this topic, see the <live-example></live-example>.</p>\n</div>\n<p>Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data.\nThe following are commonly used built-in pipes for data formatting:</p>\n<ul>\n<li><a href=\"api/common/DatePipe\"><code>DatePipe</code></a>: Formats a date value according to locale rules.</li>\n<li><a href=\"api/common/UpperCasePipe\"><code>UpperCasePipe</code></a>: Transforms text to all upper case.</li>\n<li><a href=\"api/common/LowerCasePipe\"><code>LowerCasePipe</code></a>: Transforms text to all lower case.</li>\n<li><a href=\"api/common/CurrencyPipe\"><code>CurrencyPipe</code></a>: Transforms a number to a currency string, formatted according to locale rules.</li>\n<li><a href=\"/api/common/DecimalPipe\"><code>DecimalPipe</code></a>: Transforms a number into a string with a decimal point, formatted according to locale rules.</li>\n<li><a href=\"api/common/PercentPipe\"><code>PercentPipe</code></a>: Transforms a number to a percentage string, formatted according to locale rules.</li>\n</ul>\n<div class=\"alert is-helpful\">\n<ul>\n<li>For a complete list of built-in pipes, see the <a href=\"/api/common#pipes\" title=\"Pipes API reference summary\">pipes API documentation</a>.</li>\n<li>To learn more about using pipes for internationalization (i18n) efforts, see <a href=\"/guide/i18n#i18n-pipes\" title=\"Formatting data based on locale\">formatting data based on locale</a>.</li>\n</ul>\n</div>\n<p>You can also create pipes to encapsulate custom transformations and use your custom pipes in template expressions.</p>\n<h2 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/pipes#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To use pipes you should have a basic understanding of the following:</p>\n<ul>\n<li><a href=\"guide/glossary#typescript\" title=\"Definition of Typescript\">Typescript</a> and HTML5 programming</li>\n<li><a href=\"guide/glossary#template\" title=\"Definition of a template\">Templates</a> in HTML with CSS styles</li>\n<li><a href=\"guide/glossary#component\" title=\"Definition of a component\">Components</a></li>\n</ul>\n<h2 id=\"using-a-pipe-in-a-template\">Using a pipe in a template<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/pipes#using-a-pipe-in-a-template\"><i class=\"material-icons\">link</i></a></h2>\n<p>To apply a pipe, use the pipe operator (<code>|</code>) within a template expression as shown in the following code example, along with the <em>name</em> of the pipe, which is <code><a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a></code> for the built-in <a hre
|
||
|
|
}
|