5 lines
11 KiB
JSON
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"id": "api/common/DecimalPipe",
"title": "DecimalPipe",
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/common\", \"name\": \"@angular/common\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/common/DecimalPipe\", \"name\": \"DecimalPipe\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/common\">@angular/common</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/common/src/pipes/number_pipe.ts?message=docs(common)%3A%20describe%20your%20change...#L14-L106\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/pipes/number_pipe.ts#L14-L106\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"decimalpipe\">DecimalPipe<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#decimalpipe\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label pipe\">pipe</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>Formats a value according to digit options and locale rules.\nLocale determines group sizing and separator,\ndecimal point character, and other locale-specific configurations.</p>\n\n \n </section>\n \n \n \n<section class=\"pipe-overview\">\n <code-example hidecopy=\"true\" class=\"no-box api-heading\">{{ value_expression | <span class=\"kwd nocode\">number</span> [ : digitsInfo [ : locale ] ] }}</code-example>\n\n <h2 id=\"ngmodule\">NgModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#ngmodule\"><i class=\"material-icons\">link</i></a></h2>\n<ul class=\"ngmodule-list\">\n\n <li>\n <a href=\"api/common/CommonModule\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">CommonModule</code-example>\n </a>\n </li>\n \n</ul>\n\n\n\n \n <h2 id=\"input-value\">Input value<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#input-value\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table parameters-table pipe-parameters\">\n <tbody>\n \n <tr class=\"pipe-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>value</code>\n </td>\n <td class=\"param-type\"><code>string | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a></code></td>\n <td class=\"param-description\">\n <p>The value to be formatted.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n \n \n <h2 id=\"parameters\">Parameters<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#parameters\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table parameters-table pipe-parameters\">\n <tbody>\n \n <tr class=\"pipe-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>digitsInfo</code>\n </td>\n <td class=\"param-type\"><code>string</code></td>\n <td class=\"param-description\">\n <p>Sets digit and decimal representation.\n<a href=\"api/common/DecimalPipe#digitsinfo\">See more</a>.</p>\n<p> Optional. Default is <code>undefined</code>.</p>\n\n </td>\n </tr>\n <tr class=\"pipe-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>locale</code>\n </td>\n <td class=\"param-type\"><code>string</code></td>\n <td class=\"param-description\">\n <p>Specifies what locale format rules to use.\n<a href=\"api/common/DecimalPipe#locale\">See more</a>.</p>\n<p> Optional. Default is <code>undefined</code>.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n \n</section>\n\n\n \n<section class=\"see-also\">\n <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><code><a href=\"api/common/formatNumber\" class=\"code-anchor\">formatNumber</a>()</code></p>\n</li>\n </ul>\n</section>\n\n\n \n\n\n \n<section class=\"usage-notes\">\n <h2 id=\"usage-notes\">Usage notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <h3 id=\"digitsinfo\">digitsInfo<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#digitsinfo\"><i class=\"material-icons\">link</i></a></h3>\n<p>The value's decimal representation is specified by the <code>digitsInfo</code>\nparameter, written in the following format:<br></p>\n<code-example>\n{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}\n</code-example>\n<ul>\n<li>\n<p><code>minIntegerDigits</code>:\nThe minimum number of integer digits before the decimal point.\nDefault is 1.</p>\n</li>\n<li>\n<p><code>minFractionDigits</code>:\nThe minimum number of digits after the decimal point.\nDefault is 0.</p>\n</li>\n<li>\n<p><code>maxFractionDigits</code>:\nThe maximum number of digits after the decimal point.\nDefault is 3.</p>\n</li>\n</ul>\n<p>If the formatted value is truncated it will be rounded using the \"to-nearest\" method:</p>\n<code-example>\n{{3.6 | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>: '1.0-0'}}\n&#x3C;!--will output '4'-->\n\n{{-3.6 | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>:'1.0-0'}}\n&#x3C;!--will output '-4'-->\n</code-example>\n<h3 id=\"locale\">locale<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#locale\"><i class=\"material-icons\">link</i></a></h3>\n<p><code>locale</code> will format a value according to locale rules.\nLocale determines group sizing and separator,\ndecimal point character, and other locale-specific configurations.</p>\n<p>When not supplied, uses the value of <code><a href=\"api/core/LOCALE_ID\" class=\"code-anchor\">LOCALE_ID</a></code>, which is <code>en-US</code> by default.</p>\n<p>See <a href=\"guide/i18n#setting-up-the-locale-of-your-app\">Setting your app locale</a>.</p>\n<h3 id=\"example\">Example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DecimalPipe#example\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following code shows how the pipe transforms values\naccording to various format specifications,\nwhere the caller's default locale is <code>en-US</code>.</p>\n<code-example path=\"common/pipes/ts/number_pipe.ts\" region=\"NumberPipe\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'number-pipe',\n template: `&#x3C;div>\n\n &#x3C;p>\n No specified formatting:\n {{pi | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>}}\n &#x3C;!--output: '3.142'-->\n &#x3C;/p>\n\n &#x3C;p>\n With digitsInfo parameter specified:\n {{pi | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>:'4.1-5'}}\n &#x3C;!--output: '0,003.14159'-->\n &#x3C;/p>\n\n &#x3C;p>\n With digitsInfo and\n locale parameters specified:\n {{pi | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>:'4.1-5':'fr'}}\n &#x3C;!--output: '0003,14159'-->\n &#x3C;/p>\n\n &#x3C;/div>`\n})\nexport class NumberPipeComponent {\n pi: number = 3.14159265359;\n}\n\n</code-example>\n\n</section>\n\n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/animations/AnimationAnimateMetadata\n - api/animations/AnimationPlayer\n - api/animations/AnimationStaggerMetadata\n - api/animations/AnimationStyleMetadata\n - api/animations/NoopAnimationPlayer\n - api/animations/animate\n - api/animations/browser/AnimationDriver\n - api/animations/browser/testing/MockAnimationDriver\n - api/animations/browser/testing/MockAnimationPlayer\n - api/animations/stagger\n - api/animations/style\n - api/common\n - api/common/CommonModule\n - api/common/CurrencyPipe\n - api/common/DatePipe\n - api/common/I18nPluralPipe\n - api/common/NgForOfContext\n - api/common/PercentPipe\n - api/common/SlicePipe\n - api/common/formatCurrency\n - api/common/formatDate\n - api/common/formatNumber\n - api/common/formatPercent\n - api/common/getNumberOfCurrencyDigits\n - api/common/http/HttpClient\n - api/common/http/HttpParams\n - api/common/http/HttpParamsOptions\n - api/common/http/HttpResponseBase\n - api/common/http/testing/TestRequest\n - api/common/upgrade/$locationShim\n - api/core/PipeTransform\n - api/core/QueryList\n - api/core/ReflectiveKey\n - api/core/Testability\n - api/core/TrackByFunction\n - api/core/TypeDecorator\n - api/core/ViewContainerRef\n - api/core/testing/flush\n - api/core/testing/tick\n - api/forms/AbstractControl\n - api/forms/AbstractControlDirective\n - api/forms/ControlContainer\n - api/forms/FormArray\n - api/forms/FormArrayName\n - api/forms/FormControlName\n - api/forms/FormGroupName\n - api/forms/MaxLengthValidator\n - api/forms/MaxValidator\n - api/forms/MinLengthValidator\n - api/forms/MinValidator\n - api/forms/NgControl\n - api/forms/Validators\n - api/router/GuardsCheckEnd\n - api/router/GuardsCheckStart\n - api/router/NavigationCancel\n - api/router/NavigationEnd\n - api/router/NavigationError\n - api/router/NavigationStart\n - api/router/ResolveEnd\n - api/router/ResolveStart\n - api/router/RouterEvent\n - api/router/RoutesRecognized\n - errors/NG2003\n - guide/ajs-quick-reference\n - guide/docs-style-guide\n - guide/http\n - guide/inputs-outputs\n-->\n<!-- links from this doc:\n - /api\n - api/common\n - api/common/CommonModule\n - api/common/DecimalPipe#decimalpipe\n - api/common/DecimalPipe#digitsinfo\n - api/common/DecimalPipe#example\n - api/common/DecimalPipe#input-value\n - api/common/DecimalPipe#locale\n - api/common/DecimalPipe#ngmodule\n - api/common/DecimalPipe#parameters\n - api/common/DecimalPipe#see-also\n - api/common/DecimalPipe#usage-notes\n - api/common/formatNumber\n - api/core/Component\n - api/core/LOCALE_ID\n - guide/i18n#setting-up-the-locale-of-your-app\n - https://github.com/angular/angular/edit/master/packages/common/src/pipes/number_pipe.ts?message=docs(common)%3A%20describe%20your%20change...#L14-L106\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/pipes/number_pipe.ts#L14-L106\n-->"
}