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!
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:
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
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.
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! 😄