1
00:00:00,210 --> 00:00:06,510
In this lecture, we're going to learn about two pipes for formatting numbers there, the decimal and

2
00:00:06,510 --> 00:00:07,650
currency pipes.

3
00:00:07,950 --> 00:00:10,380
Both can format numeric values.

4
00:00:10,740 --> 00:00:14,940
Formatting numbers is a common problem you'll encounter in app development.

5
00:00:15,270 --> 00:00:17,430
Let's start with the currency pipe.

6
00:00:18,120 --> 00:00:23,400
The currency pipe will format a number by adding a currency symbol before the value.

7
00:00:23,790 --> 00:00:30,630
On top of adding a currency symbol, the currency pipe can format a number with a fixed decimal size.

8
00:00:31,020 --> 00:00:35,340
If our value requires decimals, they will be added automatically.

9
00:00:35,640 --> 00:00:39,780
First, we will need to create a property for storing a number.

10
00:00:40,200 --> 00:00:42,720
Open the app component class file.

11
00:00:45,320 --> 00:00:49,220
Inside this class, we all at a property called cost.

12
00:00:49,490 --> 00:00:51,710
Its value will be two thousand.

13
00:00:54,390 --> 00:00:58,260
This property will hold the cost of some imaginary product.

14
00:00:58,560 --> 00:01:04,170
Let's update the app component template to output the price with the correct currency symbol.

15
00:01:06,820 --> 00:01:11,740
Below the other paragraph tags, we will add a paragraph with an expression.

16
00:01:14,370 --> 00:01:18,450
The expression will be the cost property with the currency pipe.

17
00:01:21,100 --> 00:01:23,410
Next, let's refresh the page.

18
00:01:25,990 --> 00:01:28,990
The currency pipe has transformed the output.

19
00:01:29,380 --> 00:01:35,590
It's pretty fixing the number with the dollar sign symbol to decimals, values have been appended to

20
00:01:35,590 --> 00:01:36,370
the output.

21
00:01:36,700 --> 00:01:40,060
This is the standard formatting for rendering U.S. currency.

22
00:01:40,390 --> 00:01:45,070
Neither of these symbol nor decimal values were a part of the original value.

23
00:01:45,460 --> 00:01:49,480
Angular was able to apply the correct formatting to our number.

24
00:01:50,020 --> 00:01:52,120
We may want to change the currency.

25
00:01:52,450 --> 00:01:56,350
The currency pipe has a parameter for modifying the currency.

26
00:01:56,740 --> 00:01:59,950
We need to provide this pipe with the currency code.

27
00:02:00,400 --> 00:02:06,910
In the resource section of this lecture, I provide a link to a list of standard currency codes called

28
00:02:06,910 --> 00:02:09,039
ISO forty two seventeen.

29
00:02:10,300 --> 00:02:17,500
This page contains a comprehensive list of currency codes, angular supports various currencies by their

30
00:02:17,500 --> 00:02:18,130
codes.

31
00:02:18,490 --> 00:02:23,260
For example, let's say we want to change the currency to the Japanese yen.

32
00:02:23,710 --> 00:02:30,160
We can pass in the code to the currency you pay to modify the current currency back in the editor.

33
00:02:30,280 --> 00:02:33,100
We will pass in a string with the currency code.

34
00:02:33,610 --> 00:02:37,300
The currency code for the Japanese yen is JPY.

35
00:02:39,940 --> 00:02:42,280
Switched back to the page in the browser.

36
00:02:44,820 --> 00:02:47,460
The pipe will format our value correctly.

37
00:02:47,790 --> 00:02:50,460
There is one thing to keep in mind about this pipe.

38
00:02:50,760 --> 00:02:54,480
It will format our value, but it will not convert the value.

39
00:02:54,900 --> 00:02:57,720
There is a difference between formatting and conversion.

40
00:02:58,110 --> 00:03:00,750
Currencies constantly change value.

41
00:03:01,080 --> 00:03:05,880
You will need to make sure the currency is properly converted before formatting it.

42
00:03:06,240 --> 00:03:11,070
For example, two thousand USD is not equal to two thousand yen.

43
00:03:11,760 --> 00:03:13,520
Let's move on to the next pipe.

44
00:03:13,710 --> 00:03:15,660
The other pipe is called decimal.

45
00:03:15,930 --> 00:03:18,690
It functions similarly to the currency pipe.

46
00:03:18,990 --> 00:03:21,180
It deals with numeric values.

47
00:03:21,510 --> 00:03:26,100
We can use it to format numbers by adding or removing decimal values.

48
00:03:26,610 --> 00:03:29,820
For example, we may want to output the temperature.

49
00:03:30,210 --> 00:03:33,750
Calculating the temperature may result in a decimal value.

50
00:03:34,080 --> 00:03:38,760
Typically, it's not common to output the temperature with a decimal value.

51
00:03:39,090 --> 00:03:42,030
A lot of apps stick to outputting whole numbers.

52
00:03:42,330 --> 00:03:48,900
We should strip the decimal values from the temperature if their presence switch over to the app component

53
00:03:48,900 --> 00:03:49,470
class.

54
00:03:52,080 --> 00:03:58,800
Inside this class, we will add a property called temperature, its value will be twenty five point

55
00:03:58,800 --> 00:03:59,280
three.

56
00:04:02,000 --> 00:04:07,550
The point three portion of the value should be removed from the property during the rendering of the

57
00:04:07,550 --> 00:04:08,150
template.

58
00:04:08,570 --> 00:04:14,480
This is a good opportunity to apply the decimal type switch over to the template file.

59
00:04:14,810 --> 00:04:18,110
We will add another set of paragraph tags.

60
00:04:20,709 --> 00:04:27,130
Inside these tags, we will create an expression for the temperature property with the no pipe.

61
00:04:29,880 --> 00:04:33,600
The name of the pipe is completely different from the class name.

62
00:04:34,140 --> 00:04:39,750
If you ever look up the documentation for this pipe, the official name is called decimal.

63
00:04:40,110 --> 00:04:43,830
Typically, the class name is the same as the pipe name.

64
00:04:44,130 --> 00:04:46,770
In this case, the names are not equal.

65
00:04:47,130 --> 00:04:49,890
Keep that in mind whenever you're working with pipes.

66
00:04:50,130 --> 00:04:53,850
The class names are not used as the pipe names.

67
00:04:54,420 --> 00:05:00,750
By default, applying the number pipe to a property will output the number without formatting.

68
00:05:01,140 --> 00:05:03,570
It's almost as if you didn't apply the pipe.

69
00:05:03,930 --> 00:05:07,410
In most cases, you will want to configure the formatting.

70
00:05:07,740 --> 00:05:11,400
The number pipe can be configured by passing in a string.

71
00:05:11,820 --> 00:05:14,340
The format for the string is a bit funky.

72
00:05:15,060 --> 00:05:17,430
Let's think about the format of a number.

73
00:05:17,700 --> 00:05:21,030
Numbers are formatted with whole numbers and decimals.

74
00:05:21,240 --> 00:05:24,390
These portions of a number are separated by a dot.

75
00:05:24,690 --> 00:05:28,330
Angular allows us to format both portions separately.

76
00:05:29,010 --> 00:05:34,230
The beginning of the format will apply to the whole number portion of a numeric value.

77
00:05:34,560 --> 00:05:38,850
It's the minimum number of digits that should appear on the left side of the number.

78
00:05:39,300 --> 00:05:46,020
Angular will append zeros to compensate for the desired length if the number falls short of the specified

79
00:05:46,020 --> 00:05:46,470
length.

80
00:05:47,040 --> 00:05:54,030
For example, if we input five, angular will prefix our number with three zeros to reach the desired

81
00:05:54,030 --> 00:05:54,480
length.

82
00:05:54,780 --> 00:05:58,530
For this demonstration, we are going to set the length to one.

83
00:05:58,950 --> 00:06:03,630
If the length exceeds the specified length, angular will not do anything.

84
00:06:04,260 --> 00:06:10,680
Next, we can add a dot to start configuring the decimal portion of the number to the dots, right?

85
00:06:10,890 --> 00:06:16,290
We can set the minimum and maximum number of digits for the decimal value, respectively.

86
00:06:16,650 --> 00:06:18,600
Let's passin zero zero.

87
00:06:19,380 --> 00:06:21,480
The first number will set the minimum.

88
00:06:21,780 --> 00:06:26,520
The second number will set the maximum by setting both numbers to zero.

89
00:06:26,730 --> 00:06:30,870
Angular will not allow the value to have any decimal values.

90
00:06:31,200 --> 00:06:34,500
The number of will strip them away from the value.

91
00:06:35,130 --> 00:06:39,360
Let's say we change the minimum and maximum to two and five.

92
00:06:39,750 --> 00:06:45,420
This value will tell the number of pipe to output a number with at least two decimal values.

93
00:06:45,750 --> 00:06:51,570
If the value has more than five digits, the additional decimal values will be stripped out.

94
00:06:51,900 --> 00:06:53,790
Time to refresh the page.

95
00:06:56,340 --> 00:07:00,000
As we wanted, the temperature will display a whole number.

96
00:07:00,360 --> 00:07:03,660
The decimal values have been taken away from the value.

97
00:07:03,870 --> 00:07:04,560
Perfect.

98
00:07:04,830 --> 00:07:08,970
We've successfully learns to more pipes for formatting numbers.

99
00:07:09,240 --> 00:07:12,270
Let's move on to more pipes in the next lecture.