0

enter image description hereI need to separate a number's numeric part and decimal part for some display purposes. Although i haven't mentioned in the heading of this question i need a comma instead of dot for decimals and to display thousands, instead of comma a space.

Actually what i am going to do is to display decimal part a little above the numeric part and numeric part ends with a comma instead of dot. I have attached an image as well. This is an Angularjs2 application.

The way i have used the number pipe now {{trn.Amount | number:'2.2-2'}}

But this gives something like this ex: 02.55

I think i have to use number pipe twice to accomplish this. But failed to implement it correctly. All help appreciated. Thanks!

Isuru
  • 950
  • 1
  • 13
  • 34

1 Answers1

1

Using number pipe twice won't work because you cannot set something like set maximum integer digits before seperator.

parameters for number pipe is as: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} see: What are the parameters for the number Pipe - Angular 2

You can use a custom pipe or a component. an example component is below which you can include in your module:

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: "mynum",
    template: "<span class='myInt'>{{num | number:'1.0-0'}}</span>,<span class='myDec'>{{dec}}</span>",
})
export class MYNUM_DIRECTIVES implements OnInit {
    @Input() public num: number;
    public dec:number;

    ngOnInit() { 
        this.dec = parseInt(Math.round(this.num * 100).toString().substr(-2));
    }
}

And use it in your template like:

<mynum num="123.45678"></mynum> <!-- output: 123,46 -->
Community
  • 1
  • 1
hakany
  • 7,134
  • 2
  • 19
  • 22
  • Thanks a lot for helping me. I tried your solution. But when i try to do the data binding like this `` it gives me an error. `Unexpected closing tag "mynum" ("le="border-width:0px; text-align:right; margin-top:20px">[ERROR ->]`. Pleas help.. – Isuru Oct 24 '16 at 09:24
  • [num] will get the value which is set in the component because of the brackets [...] – hakany Oct 24 '16 at 09:27
  • You don't also not need to set the number pipe because those are handled in the template of mynum component. You can change the template according your needs – hakany Oct 24 '16 at 09:33
  • i did it in your way like this ``. But then it only gives me only numeric part like this `-53,0`. No decimal values. Where am i going wrong? – Isuru Oct 24 '16 at 09:39
  • And this value get's assigned in a loop like this `*ngFor="let trn of transactions"`. Don't know whether it's relevant here or not. – Isuru Oct 24 '16 at 09:41
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126508/discussion-between-isuru-and-hakany). – Isuru Oct 24 '16 at 09:49