When developing a website, it is critical to present accurate and correctly structured data. If you offer data without formatting or modifying it to keep up with your needs of the user, your online users may be unable to grasp the content.
We implement Angular 12 Pipes to modify and format data in the simplest way that web users can understand. Pipes enable us to change and manipulate data in templates right before it is displayed to the user. This chapter will walk you through the different built-in pipelines in Angular 12 that will allow you to turn data into the required output or information for the user.
Built-in Pipes
Angular 12 frameworks have a variety of built-in pipelines for modifying data. This means you can always utilize a custom pipe to assist you write your data quickly and to make it meet the needs of your user.
These built-in pipes are:
The DatePipe
This pipe is used to format dates in the Angular 12 templates. This pipe allows you to format the JavaScript Date object to fit the demands or expectations of your users.
It is considerably simpler to use a DatePipe in your code. All you have to do is construct a date object and insert it into an HTML template.
Let's use a DatePipe to show the current date and time on the screen.
To begin, let's build a Date type object within a constructor
date: Date;
constructor(){
this.date = new Date();
}
|
Next, insert this object into an HTML template. This template will provide a browser view
<div class='container mt-3'> <div class='row'> The Date today is {{date}} </div> </div> |
Using interpolation and rendering our page, the following result will be presented on the website
 |
You will notice that the information displayed may not be in a formal format since the users may not be interested in all of the information. We may format the data using the datePipe and display only the month, day, and year
<div class="container mt-3"> <div class="row"> The Date today is {{date | date}} </div> </div> |
Now, use the datePipe below to style your data such that our output appears nicer than the previous one
Obviously, our date will be shown in our local date/time format, but we can change it using the parameter strings listed below:
<div class="container mt-3"> <div class="row"> The Date today is {{date | date: "MM/dd/yy"}} </div> </div> |
The strings MM denotes the month, DD denotes the day, and YY denotes the year. These three values are then separated by the forward slash, and our date is shown as follows:
That seems more professional and presentable now.
The UpperCasePipe
Just like its name implies, this pipe converts all strings from lowercase to uppercase
<div class="container mt-3"> <div class="row"> {{"Translate me to uppercase" | uppercase}} </div> </div> |
Output:
TRANSLATE ME TO UPPERCASE
The LowerCasePipe
As its name says, it coverts strings into a lowercase:
<div class="container mt-3"> <div class="row"> {{"TRANSLATE ME TO LOWERCASE" | lowercase}} </div> </div> |
Output:
translate me to lowercase
The TitleCasePipe
Also, from their name, this pipe transforms the first text of every word/string into a capital letter. Here is an illustration of how it works
<div class="container mt-3"> <div class="row"> {{'translate me to titlecase' | titlecase}} </div> </div> |
Output:
Translate me Titlecase
The DecimalPipe
This pipe converts integers into particular forms, allowing you to define the minimum and maximum values as well as insert decimals.
The decimals representation describes the strings as follows:
{minIntegers}.
minFractions-maxFractions o minIntegers- this covers all integers before decimals.
MinFractions-numbers should be placed after the decimal point.
Place maxFractions-digits after decimals
The CurrencyPipe
This pipe will help you in formatting numbers as currency values. It operates smoothly based on the currency symbol and the given code.
For example, the pipe {{123456 | currency:’USD’:’symbol’}} displays $123,456.00.
The PercentPipe
This pipe converts a given integer into a percentage string. This pipe is similar to the number pipe in that the user's input is multiplied by 100 to determine the percentage. For example, in 0.15 |percent, the number 0.15 is multiplied by 100, and the value displayed on the screen is 15%.
Conclusion
We've discussed about angular 12 custom pipes and how you can use them in your code to fulfill the demands of different users in different locales. We'll study about Reactive Programming in the next chapter