Usually we need to use pipelines to format data. The pipelines in Angular4 have changed from before. Let’s talk about some commonly used pipelines below.
1. Case conversion pipeline
- uppercase converts string to uppercase
- lowercase converts string to lowercase
<p>Convert string to uppercase{{str | uppercase}}</p>
str:string = 'hello'
It will be displayed on the page
Convert string to uppercase HELLO
2. Date pipeline
date. The date pipe character can accept parameters and specify the format of the output date.
<p>The time is now{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
today:Date = new Date();
The current time will be displayed on the page at 10:57:53 on May 8, 2017
3. Decimal Pipeline
Number pipeline is used to process numbers into the decimal format we need
The received parameter format is {min. integer digits}.{min. decimal digits}-{maximum decimal digits}
The minimum number of integer digits defaults to 1
The minimum decimal digit default is 0
The maximum number of decimal places is 3 by default
When the number of decimal places is less than the specified {minimum number of decimal places}, 0 will be automatically added
When the number of decimal places is more than the specified {maximum number of decimal places}, it will be rounded
<p>Pi is{{pi | number:'2.2-4'}}</p>
pi:number = 3.14159;
It will be displayed on the page
Pi is 03.1416
4. Currency Pipeline
Currency pipeline is used to convert numbers into currency format
<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>
a:number = 8.2515 b:number = 156.548
The page will be displayed
USD8.25
0156.55 The 'USD' here is the abbreviation of USD UnitedStatesdollar. When it is false, the character is not displayed. When it is true, the character is displayed. The parameters for the number of decimal places that are specified below are the same as those described above.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.