NgxFixedDecimal

NgxFixedDecimal this is Angular pipe for round a number to N decimal places. Allows you to set a fixed number of decimal places, the missing number of characters will be filled with zeros.

For example, if the number of decimal places is 4, and the rounding method is Math.ceil(), the result is as follows:

0             => 0.0000
1             => 1.0000
10            => 10.0000
10.12         => 10.1200
10.1234       => 10.1234
10.12344      => 10.1235
10.123456     => 10.1235
10.5          => 10.5000

Installation

Add npm package

npm install ngx-fixed-decimal

Import NgxFixedDecimal into your application module

import {NgxFixedDecimalModule} from 'ngx-fixed-decimal';
 
@NgModule({
  ...
  imports: [
    ...
    NgxFixedDecimalModule
    ...
  ],
})

Using pipe

The pipe name to use in template bindings is fixedDecimal

{{ number | fixedDecimal [ : mathMethod [ : precision [ : zeros ] ] ] }}

To use the fixedDecimal pipe in a component and services, add NgxFixedDecimalPipe to the list of providers in the root module.

import {NgxFixedDecimalPipe} from 'ngx-fixed-decimal';
 
@NgModule({
  providers: [
    NgxFixedDecimalPipe
  ]
})

Inject the NgxFixedDecimalPipe into component constructor using dependency injection.

import {NgxFixedDecimalPipe} from 'ngx-fixed-decimal';
 
@Component({
    ...
})
export class AppComponent {
  constructor(
    private fixedDecimal: NgxFixedDecimalPipe
  ) {
    console.log(this.fixedDecimal.transform(10.123456, 2, 'ceil'));
  }
}

Specifying global configuration

Default options can be specified by providing an instance of FixedDecimalConfig for FIXED_DECIMAL_CONFIG in the root module of your application.

import {FIXED_DECIMAL_CONFIG} from 'ngx-fixed-decimal';
 
@NgModule({
  providers: [
    {
        provide: FIXED_DECIMAL_CONFIG,
        useValue: {
            mathMethod: 'round',
            precision: 2,
            zeros: true
        }
    }
  ]
})

Classes

FixedDecimalConfig

Configuration for default options

Properties

Name	Type	Default	Description
mathMethod	MathMethod	round	Math rounding method
precision	number	2	Number of characters after decimal point
zeros	boolean	true	Show zeros at the end

Type aliases

MathMethod

Valid Math rounding methods

type MathMethod = 'floor' | 'ceil' | 'round' | 'trunc';

Name	Description
floor	Rounds the argument to the nearest smaller integer
ceil	Rounds the argument to the nearest larger integer
round	Rounds the argument to the nearest integer
trunc	Returns the integer part of a number by removing all fractional characters

Constants

FIXED_DECIMAL_CONFIG

Injection token that can be used to specify default options.

const FIXED_DECIMAL_CONFIG = new InjectionToken<FixedDecimalConfig>;