Skip to content

meroPush/ngx-fixed-decimal

Repository files navigation

NgxFixedDecimal

npm npm GitHub stars GitHub license

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>;