In this lecture, we're going to learn about two pipes for formatting numbers there, the decimal and
currency pipes.
Both can format numeric values.
Formatting numbers is a common problem you'll encounter in app development.
Let's start with the currency pipe.
The currency pipe will format a number by adding a currency symbol before the value.
On top of adding a currency symbol, the currency pipe can format a number with a fixed decimal size.
If our value requires decimals, they will be added automatically.
First, we will need to create a property for storing a number.
Open the app component class file.
Inside this class, we all at a property called cost.
Its value will be two thousand.
This property will hold the cost of some imaginary product.
Let's update the app component template to output the price with the correct currency symbol.
Below the other paragraph tags, we will add a paragraph with an expression.
The expression will be the cost property with the currency pipe.
Next, let's refresh the page.
The currency pipe has transformed the output.
It's pretty fixing the number with the dollar sign symbol to decimals, values have been appended to
the output.
This is the standard formatting for rendering U.S. currency.
Neither of these symbol nor decimal values were a part of the original value.
Angular was able to apply the correct formatting to our number.
We may want to change the currency.
The currency pipe has a parameter for modifying the currency.
We need to provide this pipe with the currency code.
In the resource section of this lecture, I provide a link to a list of standard currency codes called
ISO forty two seventeen.
This page contains a comprehensive list of currency codes, angular supports various currencies by their
codes.
For example, let's say we want to change the currency to the Japanese yen.
We can pass in the code to the currency you pay to modify the current currency back in the editor.
We will pass in a string with the currency code.
The currency code for the Japanese yen is JPY.
Switched back to the page in the browser.
The pipe will format our value correctly.
There is one thing to keep in mind about this pipe.
It will format our value, but it will not convert the value.
There is a difference between formatting and conversion.
Currencies constantly change value.
You will need to make sure the currency is properly converted before formatting it.
For example, two thousand USD is not equal to two thousand yen.
Let's move on to the next pipe.
The other pipe is called decimal.
It functions similarly to the currency pipe.
It deals with numeric values.
We can use it to format numbers by adding or removing decimal values.
For example, we may want to output the temperature.
Calculating the temperature may result in a decimal value.
Typically, it's not common to output the temperature with a decimal value.
A lot of apps stick to outputting whole numbers.
We should strip the decimal values from the temperature if their presence switch over to the app component
class.
Inside this class, we will add a property called temperature, its value will be twenty five point
three.
The point three portion of the value should be removed from the property during the rendering of the
template.
This is a good opportunity to apply the decimal type switch over to the template file.
We will add another set of paragraph tags.
Inside these tags, we will create an expression for the temperature property with the no pipe.
The name of the pipe is completely different from the class name.
If you ever look up the documentation for this pipe, the official name is called decimal.
Typically, the class name is the same as the pipe name.
In this case, the names are not equal.
Keep that in mind whenever you're working with pipes.
The class names are not used as the pipe names.
By default, applying the number pipe to a property will output the number without formatting.
It's almost as if you didn't apply the pipe.
In most cases, you will want to configure the formatting.
The number pipe can be configured by passing in a string.
The format for the string is a bit funky.
Let's think about the format of a number.
Numbers are formatted with whole numbers and decimals.
These portions of a number are separated by a dot.
Angular allows us to format both portions separately.
The beginning of the format will apply to the whole number portion of a numeric value.
It's the minimum number of digits that should appear on the left side of the number.
Angular will append zeros to compensate for the desired length if the number falls short of the specified
length.
For example, if we input five, angular will prefix our number with three zeros to reach the desired
length.
For this demonstration, we are going to set the length to one.
If the length exceeds the specified length, angular will not do anything.
Next, we can add a dot to start configuring the decimal portion of the number to the dots, right?
We can set the minimum and maximum number of digits for the decimal value, respectively.
Let's passin zero zero.
The first number will set the minimum.
The second number will set the maximum by setting both numbers to zero.
Angular will not allow the value to have any decimal values.
The number of will strip them away from the value.
Let's say we change the minimum and maximum to two and five.
This value will tell the number of pipe to output a number with at least two decimal values.
If the value has more than five digits, the additional decimal values will be stripped out.
Time to refresh the page.
As we wanted, the temperature will display a whole number.
The decimal values have been taken away from the value.
Perfect.
We've successfully learns to more pipes for formatting numbers.
Let's move on to more pipes in the next lecture.