Detailed explanation of common pipeline examples in Angular4

Usually we need to use pipes to format data. The pipes in Angular4 have some changes from before. This article mainly introduces the commonly used pipelines in Angular4. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Case conversion pipeline

• uppercase converts the string to uppercase

• lowercase Convert the string to lowercase

将字符串转换为大写{{str | uppercase}}

str:string = 'hello'

will be displayed on the page

Convert the string to uppercase HELLO

2. Date Pipe

date. The date pipe character can accept parameters to specify the format of the output date.

现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}

today:Date = new Date();

The page will show that the current time is 10:57:53 on May 8, 2017

3. Decimal Pipeline

number The pipeline is used to process numbers into the decimal format we need

The received parameter format is {minimum number of integer digits}.{minimum number of decimal digits}-{maximum number of decimal digits}

The minimum number of integer digits defaults to 1

The minimum number of decimal digits defaults to 0

The maximum number of decimal digits defaults to 3

When the number of decimal places is less than the specified {minimum number of decimal places}, 0 will be added automatically

When the number of decimal places is more than the specified {maximum number of decimal places}, it will be Rounding

圆周率是{{pi | number:'2.2-4'}}

pi:number = 3.14159;

will be displayed on the page

The pi is 03.1416

4. Currency Pipe

The currency pipe is used Convert the number to currency format

{{a | currency:'USD':false}}
{{b | currency:'USD':true:'4.2-2'}}

a:number = 8.2515
b:number = 156.548

The page will display

USD8.25

0156.55 'USD' here is the abbreviation of United States dollar, When it is false, the symbol is not displayed. When it is true, the $ symbol is displayed. The following parameters specifying the number of decimal places are the same as those introduced above.

Related recommendations:

Application of PHP multi-threaded pipeline communication

The above is the detailed content of Detailed explanation of common pipeline examples in Angular4. For more information, please follow other related articles on the PHP Chinese website!