Angular pipe formatting for millions

Question

I'm working with big numbers that I'm now formatting like this

{{total  | number:'1.0-0'}}

and the outcome is 45,986,592. I need to format the number to just have the millions and then just one digit after, so 45.9

How can I achieve this?

Answer 1

You can built a custom pipe if you want to reuse this logic.

As Phil suggested, you can just divide it by 1,000,000

import { Pipe, PipeTransform } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Pipe({
  name: 'million'
})
export class MillionPipe implements PipeTransform {

  constructor(private decimalPipe: DecimalPipe) {

  }
  transform(value: any, digits?: any): any {
    return this.decimalPipe.transform(value/1000000, digits)
  }

}

Make sure you have the decimal pipe registered in your module provider so it can be injected.

Working Demo:

https://stackblitz.com/edit/angular-aa16so?file=app%2Fmillion.pipe.ts