Pipes are a really simple way to transform how data is displayed to the user. Angular comes with lots of built-in pipes for common scenarios (JsonPipe, CurrencyPipe, DatePipe, etc). But what if you need something custom for your project?
In this article, we'll be exploring how to create your own pipes. I'll run through a simple example that adds the correct order suffix to a number (eg. 1st, 12th, -123rd, etc). Let's dive in!
Creating your own Pipes
The first thing you'll need to do is to come up with a suitable name for your pipe. It should reflect what the pipe does. In my case, I'll call the pipe OrderSuffix. Then, run the following command in your terminal.
ng generate pipe OrderSuffix
This will add your pipe to your declarations array in AppModule. The generated code should look like this:
The transform function is responsible for taking the input from the HTML template and producing the output to be displayed.
We want to be able to add an order suffix based on the number, which is mostly determined by the last digit (least significant digit). So 1 becomes 1st, 2 becomes 2nd, 4 becomes 4th and so forth. It's also helpful to note that we're taking in a number and returning a string.
This pipe looks pretty good so far. We defined a suffix map for digits ending in 1, 2 and 3, converting them to 1st, 2nd and 3rd respectively. If the last digit is none of these 3, then we assume the suffix is "th" (4th, for example).
We can demo our pipe inside a simple component as follows:
The component displays the array of numbers with their order suffixes. However, if we look at the very last number, there's a problem.
1st
2nd
3rd
14th
-128th
11st
We need to convert 11 to 11th, not to 11st. Our current pipe will also convert 12 to 12nd and 13 to 13rd, which aren't correct. Remember that the pipe has to work with larger numbers as well, so for example, 1259239411 should still give 1259239411th.
Notice how this problem only occurs for 11, 12 and 13 or numbers that end with 11, 12 and 13. We should deal with those cases first before our general code runs.
Now, our pipe looks for the last 2 digits being 11, 12 or 13 and returns the number with the suffix "th" for all of them. If not, then we run our previous code. Now our output looks a little more accurate.
1st
2nd
3rd
14th
-128th
11th
Lessen your burden:
If you're writing a custom parsing function just to change how data is displayed, then you're better off putting that parsing function inside a pipe.
Without using pipes, inside your component would follow this process:
- Define/Import your parsing function
- Get the data you want to transform
- Run the data through the function and store the result in a new variable
- Display that new variable
Whereas with Pipes, we just:
- Define the parsing function inside the pipe
- Use the pipe in the component HTML template.
No extra imports, no extra variables, and the component is as dumb as possible.
Conclusion
Now you know how to create your own pipes!
This is also the end to my 4 part series on Pipes in Angular. There are 2 built-in pipes that I haven't mentioned (I18nPluralPipe and I18nSelectPipe). Now you know enough to explore these pipes on your own and create some of your own!
Good luck in your Angular journey! 😄
Top comments (0)