- \n
- Pipes in Angular Part \u2013 1 : lowercase, uppercase, and titlecase pipes<\/a><\/li>\n
- \n
\nPipes in Angular Part \u2013 2 : DatePipe<\/a><\/div>\n<\/div>\n<\/li>\n<\/ul>\n<\/div>\nCurrencyPipe, and PercentPipe, Both are used to transform a number to a specific type of currency, and percentage value.<\/p>\n
CurrencyPipe<\/h3>\n
CurrencyPipe is used to transform a number to a currency string according to the locale rule.<\/p>\n
Syntax<\/strong><\/p>\n
\n{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}<\/div>\n<\/div>\n<\/div>\nConsider the below code to apply currencyPipe and which we will use in our demos.<\/div>\n<\/div>\napp.component.ts<\/strong><\/div>\n\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n amount: number = 20120;\r\n}\r\n<\/pre>\napp.component.html<\/strong><\/p>\n
<div style=\"text-align:left\">\r\n <p>Amount is : {{amount | currency}}\r\n<\/div>\r\n\r\n\/\/Output: Amount is : $20,120.00<\/pre>\nThis is the way by which we can apply currencypipe. Now let us discuss and apply all the parameters to format currency in more ways.<\/p>\n
currencyCode <\/strong><\/h4>\n
{{ value_expression | currency [ : currencyCode<\/strong> [ : display [ : digitsInfo [ : locale ] ] ] ] }}<\/p>\n
- \n
- The currencyCode such as INR<\/strong> for Indian Rupee , USD<\/strong> for US dollar, EUR<\/strong> for the euro<\/li>\n
- Default it is undefined<\/strong><\/li>\n
- Check this out for full list of currency code <\/a><\/li>\n<\/ul>\n
<div style=\"text-align:left\">\r\n <p>Amount is : {{amount | currency : 'INR'}}\r\n<\/div>\r\n\r\n\/\/Output: Amount is : \u20b920,120.00<\/pre>\ndisplay<\/strong><\/h4>\n
{{ value_expression | currency [ : currencyCode [ : display<\/strong> [ : digitsInfo [ : locale ] ] ] ] }}<\/p>\n
This is used to display the format of the currency indicator. It has certain values listed in below table. But before that let us see how to use one of them<\/p>\n
<div style=\"text-align:left\">\r\n <p>Amount is : {{amount | currency : 'INR' : 'code'}}\r\n<\/div>\r\n\r\n\/\/Output: Amount is : INR20,120.00<\/pre>\nHere, in output we can see ‘INR’ instead of rupee symbol.\u00a0 So here is the full table for display values.<\/p>\n[table style=”3″]\n[tr][th]value[\/th] [th]Description[\/th] [th]Output[\/th][\/tr]\n[tr][td]code[\/td] [td]It will show the code like INR<\/strong>[\/td] [td]Amount is : INR20,120.00[\/td][\/tr]\n[tr][td]symbol[\/td] [td]This is default, and it will show symbol like \u20b9<\/strong>[\/td] [td]Amount is : \u20b920,120.00 [\/td][\/tr]\n[tr][td]symbol-narrow[\/td] [td]Use this for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. If the locale has no narrow symbol, uses the standard symbol for the locale[\/td][td]
Amount is : {{amount | currency : 'CAD' : 'symbol-narrow'}}<\/code><\/p>\nAmount is : $20,120.00[\/td][\/tr]\n[tr][td]string[\/td] [td]This is used to display a given string instead of any code or symbol[\/td] [td]
Amount is : {{amount | currency : 'hello'}} \/\/Output:Amount is : hello20,120.00<\/code>[\/td][\/tr]\n<\/div>\n\n[\/table]\ndigitsInfo<\/strong><\/h4>\n
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo<\/strong> [ : locale ] ] ] ] }}<\/p>\n
Decimal representation options, specified by a string in the following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}<\/strong><\/p>\n
Let us consider a below code to understand uses. For that we need to change value of amount.
\namount: number = 0.12;<\/code><\/strong><\/p>\n<\/p>\n
- \n
- minIntegerDigits<\/strong>: The minimum number of integer digits before the decimal point. Default is 1.<\/li>\n
- minFractionDigits<\/strong>: The minimum number of digits after the decimal point. Default is 0.<\/li>\n
- maxFractionDigits<\/strong>: The maximum number of digits after the decimal point. Default is 3.<\/li>\n<\/ul>\n
locale<\/strong><\/h4>\n
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale<\/strong> ] ] ] ] }}<\/p>\n
A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.<\/p>\n
Optional. Default is undefined.<\/p>\n<\/div>\n
PercentPipe<\/h3>\n
It is used to transform a number to a percentage string according to a locale rules.<\/p>\n
Syntax<\/strong><\/p>\n
\n{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}<\/div>\n<\/div>\n<\/div>\nConsider the below code for the usage<\/div>\n<\/div>\napp.component.ts<\/strong><\/div>\n\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n num1: number = 0.12;\r\n}\r\n<\/pre>\napp.component.html<\/strong><\/p>\n
<div style=\"text-align:left\">\r\n <p>Percentage is : {{num1 | percent}}\r\n<\/div>\r\n\r\n\/\/Output: Percentage is : 12%<\/pre>\nThere are two parameters which we can pass with the percentPipe,<\/p>\n
1. digitsInfo<\/p>\n
2. locale.<\/p>\n
This both parameter works same as currencyPipe. Consider that description for the same, and let us see a small example by passing digitsInfo <\/strong>parameter in above example and see the output<\/p>\n
<div style=\"text-align:left\">\r\n <p>Percentage is : {{num1 | percent : '2.2-2'}}\r\n<\/div>\r\n\r\n\/\/Output: Percentage is : 12.00%<\/pre>\nSummary<\/h3>\n
In this article we have discussed how to use currency, and percent pipe to format a number. In next article we will have a look on SlicePipe<\/a>, JSON Pipe<\/a> and Async Pipe<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Here is the third installment of angular pipe series in this part we will discuss about CurrencyPipe, and PercentPipe, If you have not read previous articles here is the link…<\/p>\n","protected":false},"author":4,"featured_media":2649,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[29,197,173,179,194,206,200,201,202,205,204,203,199],"powerkit_post_featured":[],"class_list":{"0":"post-3779","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"tag-angular","9":"tag-angular-4","10":"tag-angular-5","11":"tag-angular-6","12":"tag-angular-pipes","13":"tag-currencycode","14":"tag-currencypipe","15":"tag-digitsinfo","16":"tag-locale","17":"tag-maxfractiondigits","18":"tag-minfractiondigits","19":"tag-minintegerdigits","20":"tag-percentpipe"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-YX","jetpack-related-posts":[{"id":4091,"url":"https:\/\/code4developers.com\/create-custom-pipes-aka-filters-in-angular-2-x\/","url_meta":{"origin":3779,"position":0},"title":"Create Custom Pipes – Filters in Angular 2.X +","author":"Arif Khoja","date":"March 10, 2019","format":false,"excerpt":"Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time). For such small and repeated\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3746,"url":"https:\/\/code4developers.com\/angular-pipes\/","url_meta":{"origin":3779,"position":1},"title":"Pipes in Angular Part – 1 : lowercase, uppercase, and titlecase pipes","author":"Yatendrasinh Joddha","date":"June 30, 2018","format":false,"excerpt":"In this series of article for the angular rookies we will discuss about pipes in Angular, a way to write display-value transformations that you can declare in your HTML. In this article we will discuss about lowercase, uppercase, and titlecase pipes. At the end of the series we will create\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"example output","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/06\/example-output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3818,"url":"https:\/\/code4developers.com\/slicepipe-jsonpipe-asyncpipe\/","url_meta":{"origin":3779,"position":2},"title":"Pipes in Angular Part \u2013 4 : SlicePipe, JSONPipe, AsyncPipe","author":"Yatendrasinh Joddha","date":"August 19, 2018","format":false,"excerpt":"Here is the fourth part of angular pipe series in this part we will discuss about SlicePipe, JSONPipe, and AsyncPipe. If you have not read previous articles here is the link for previous articles. Pipes in Angular Part \u2013 1 : lowercase, uppercase, and titlecase pipes Pipes in Angular Part\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2625,"url":"https:\/\/code4developers.com\/angular-4-project-structure\/","url_meta":{"origin":3779,"position":3},"title":"Angular 4 Project Structure","author":"Nisarg Dave","date":"June 18, 2017","format":false,"excerpt":"Introduction In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0. This article describes the project structure of Angular 4 application which Angular CLI created for us. I have already created ANGULAR4DEMO project in my previous article, so we will use that project to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3340,"url":"https:\/\/code4developers.com\/top-angularjs-interview-question\/","url_meta":{"origin":3779,"position":4},"title":"Top AngularJS interview questions","author":"Arif Khoja","date":"March 23, 2018","format":false,"excerpt":"Read Angular js interview questions including topic advanced topics like Dependency injection, Two-way binding, scope in angular js and many more. 1.Explain Directive scopes? There are three types of directive scopes available in Angular. Parent Scope: is default scope Child Scope: If the properties and functions you set on the\u2026","rel":"","context":"In "AngularJs"","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2586,"url":"https:\/\/code4developers.com\/angular-4-installations\/","url_meta":{"origin":3779,"position":5},"title":"Angular 4 Installations","author":"Nisarg Dave","date":"June 14, 2017","format":false,"excerpt":"Introduction This article demonstrates how to install Angular 4 in your local system and start working with angular\/cli using basic commands. What is Angular 4? Before starting with Angular 4, we need to know about Angular 2. Angular 2 is totally different kind of framework from Angular 1. Angular 1\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3779"}],"version-history":[{"count":20,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3779\/revisions"}],"predecessor-version":[{"id":3879,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3779\/revisions\/3879"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2649"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3779"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- minFractionDigits<\/strong>: The minimum number of digits after the decimal point. Default is 0.<\/li>\n
- Default it is undefined<\/strong><\/li>\n
- \n
![\"CurrencyPipe\"](\"https:\/\/code4developers.com\/wp-content\/uploads\/2018\/07\/digitsInfo.png\")
<\/p>\n