Pipes in Angular allow users to transform data before it’s displayed in the view. Pipes are similar to filters in other programming languages but are more flexible and can be customized to meet specific needs. Here, you will explore how to use pipes in your Angular application.
What Are Pipes in Angular?
Angular pipes are data transformers that make your app more dynamic. They take a value as an input and return a transformed value as output. Data transformation can be as simple as formatting a date, or currency, or as complex as filtering or sorting a list of items.
you’re able to use the pipesin your Angular componentsand your templates. Pipes are easy to use, and you can chain them to create more complex transformations.
Angular provides several built-in pipes includingDatePipe,UpperCasePipe,LowerCasePipe,CurrencyPipe,DecimalPipe,PercentPipe,JsonPipe,SlicePipe, andAsyncPipe. It also provides the functionality to create custom pipes.
Each built-in Angular pipe performs a unique function and can help you to transform data.
TheDatePipeformats and displaysyour date and time variablesin a specified format, considering your locale. Unlike other frameworks that requireJavaScript packages to format date and time, Angular uses theDatePipe. To useDatePipein your application, add the pipe symbol (|) followed bydateand any additional parameters.
For example:
In this example, you pass thecurrentDatevariable through theDatePipe, which then formats it according to the default date format. You define thecurrentDatevariable in your component’s TypeScript file.
Here is an example:
You can also pass additional parameters to theDatePipeto customize the output:
The code block above passed theshortDateparameter to theDatePipe. This tells theDatePipeto format the date using the short date format. Alongside theshortDateparameter, you can configure theDatePipeusing various parameters, includingz,longDate, and custom date formats such asdd/MM/YY.
UpperCasePipe and LowerCasePipe
TheUpperCasePipeandLowerCasePipetransform your texts. You transform your texts to uppercase using theUpperCasePipeand lowercase using theLowerCasePipe.
To use theUpperCasePipeandLowerCasePipe, add the pipe symbol (|) followed bylowercaseto use theLowerCasePipeoruppercaseto use theUpperCasePipe.
Below is an example of how to use theUpperCasePipeandLowerCasePipe:
CurrencyPipe
Using theCurrencyPipe, you can format numbers to a currency in your application. TheCurrencyPipeformats the numbers according to your locale. To format your numbers using theCurrencyPipe, use the pipe symbol followed bycurrency.
In this example, theCurrencyPipeconverts the number variable to a currency. By default, theCurrencyPipeconverts variables to dollars. To change this, you can configure theCurrencyPipeto convert to other currencies by passing additional parameters.
Here, you pass theGBPparameter to theCurrencyPipe. This ensures that thenumbervariable converts to the Great Britain Pound currency.
DecimalPipe and PercentPipe
TheDecimalPipetransforms your numbers into decimals, while thePercentPipeconverts your numbers to percentages.
To use theDecimalPipe, use the pipe symbol followed bynumberand additional parameters. To use thePercentPipe, do the same but replace thenumberwithpercentwith no additional parameters.
The additional parameters passed to theDecimalPipecontrol the number of integer and fractional digits displayed. The1parameter specifies that there should be at least one integer digit. In comparison, the2.3parameter specifies that there should be at least two and up to three fractional digits.
TheJsonPipeis a built-in pipe that converts data into a JSON string format. It is mainly used for debugging purposes. You can use theJsonPipeon both objects and arrays.
The syntax for using theJsonPipeis as follows:
Here,expressionis the data you want to convert into JSON format. The pipe operator (|) applies theJsonPipeto the expression.
For example, define an object and an array in your component:
The code block above defines auserobject and aprofilesarray. Now, you’re able to use theJsonPipeto convert the object and array into JSON.
Here, theJsonPipewill convert theuserobject and theprofilesarray into a JSON string, which you can quickly inspect in your templates during development or debugging.
TheSlicePipeis very similar to the JavaScriptslice()method. TheSlicePipeformats arrays or strings by extracting their elements to create new arrays or strings.
To use theSlicePipe, you use the pipe symbol followed bysliceand two parameters, the start and end indexes. The start index is the position in the array or string where the pipe will start extracting elements, and the end index is where the pipe will stop extracting elements.
Here is an example of how to use theSlicePipe:
In this example, theSlicePipewill extract the first two elements from thestringvariable, the element at index 0 and the element at index 1. Further, it will extract the first element from thearrayvariable. TheSlicePipeis useful when you want to display only a portion of data in the template.
The syntax for usingAsyncPipeis as follows:
Chaining Pipes in Angular
you may chain pipes together to perform multiple transformations in a single expression. Chaining pipes is as simple as using numerous pipe operators (|) in a single expression. The output of each pipe becomes the input for the next.
Here’s the basic syntax:
For example, you can transform a date object into a string using theDatePipeand then convert that string to uppercase using theUpperCasePipe.
Create Dynamic Applications Using Pipes
Pipes are a powerful feature in Angular that allows you to transform data before it displays in the view. Here, you learned about the various built-in pipes Angular offers, such as DatePipe, CurrencyPipe, UpperCasePipe, etc. You also learned how to use them in your application to create more dynamic content. Using pipes, developers can create more flexible and dynamic web applications with less code.
Q: How Do I Create My Own Custom Pipes?
Alongside these built-in pipes,you can create custom pipesto format data according to your own needs.
Q: What’s the Difference Between a Pipe and a Directive?
Angular’s built-in directivesreceive and manipulate DOM elements, while pipes operate on data.
Q: Is Angular Still Improving Pipes?
Pipes are a stable part of the framework, but support continues to improve. For example, inthe v16 release, you can now automatically generate pipe files using the Angular CLI.
