Block Round Off using decimal pipe in angular 4

Question

Using angular 4,

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

Output: 32

Any idea, how to block the round off. Expecting the result is 31

Answer 1

You need to create your custom pipe as DecimalPipe doesn't provide any floor feature. Plus you can add your decimal pipe in it. Your Custom Pipe:

@Pipe({name: 'floor'})
export class FloorPipe implements PipeTransform {
    /**
     *
     * @param value
     * @returns {number}
     */
    transform(value: number): number {
        return Math.floor(value);
    }
}

Use in template as:

  <span>{{ yournumber | floor | your_decimal_pipe }}</span>

Answer 2

your.component.ts

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


@Pipe({name: 'DecimalPipe'})
export class NumNotRoundPipe implements PipeTransform {
  transform(value: number): number {
    var num1 = Math.floor(value * 100) / 100;
    return num1;
  }
}

your.module.ts

import {NumNotRoundPipe} from './your.component'

@NgModule({
    imports: [
    ],
    declarations: [
        NumNotRoundPipe
    ],
    entryComponents: [

    ],
    providers: [

    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

your.component.html

<span>{{yourNumber | DecimalPipe:'1.2-2'}}</span>

Answer 3

When only 'round' is available, you can simulate 'floor' by substracting 0.5 to the value.

{{31.94 - 0.5 | number:'1.0-0'}}

If your value can be below 0.5, in order to avoid printing "-1", you'd have to write:

<ng-container *ngIf="myVal >= 0.5">{{ myVal - 0.5 | number:'1.0-0' }}></ng-container>
<ng-container *ngIf="myVal < 0.5">0</ng-container>

Answer 4

You might not need an extra custom pipe. Output is a string and there are plenty of string pipes. You might truncate like this :

{{31.94 | slice:0:2}}
//Output : 31

Would achieve your desired output in that specific case.

{{1.94 | number:'2.2-2' | slice:0:2}}
//Output : 01

You'll still want to use custom pipe for now if you don't want padding 0.

Answer 5

In your module file:

import { CommonModule } from '@angular/common';

Add it to imports array:

imports [
   CommonModule
]

Then use:

{{31.94 | number:'1.0-0'}} 
// It will display 31