Display number in billion, million, thousand using custom pipe in angular

2 min readJan 8, 2020

In this article, we will create a custom reusable pipe in angular which will help us to display big numbers to short numbers with the suffix.

K for Thousand, M for Million, B for Billion and T for Trillion.

Let's start by creating a pipe. We can create a custom pipe using npm

 ng g pipe numberSuffix pipe

Now, Change its content with the below code.

Now, update your html file where you want to use this pipe like below.

And it is done, your pipe is ready. :blush: :blush:
The special thing about this pipe is, it will handle negative numbers, the strings also.

{{ anyBigNumber | numberSuffix }}

You can check it like this.

{{ 12600000 | numberSuffix }} -> 13M{{ 12600000 | numberSuffix: 2 }} -> 12.60M{{ 12600 | numberSuffix: 2 }} -> 12.60K{{ 126 | numberSuffix }} -> 126

Please comment if you face any issues. Here are a few other articles. Check it out them also, these also will be useful to you.

Million dollar pipe in Angular
D3.js charts integration with angular 8

Please comment if you face any issues. 😃 😃

Please Clap if you found these questions useful. 🙌 🙌 Happy coding. 😃 😃

Written by Nimish Goel