How to use Numeral.js library in angular2/ionic 2 typescript app?

Question

I have been successful using Numeral.js library in my angularJs(1.x) applications to format my numbers in different formats. This is how I use angular1 filters:

filter.js

.filter('numeral', function () {
  return function (count) {
    var numericalFormat = numeral(count).format('0.0a');
    return numericalFormat;
  };
})

For that I followed the official docs of Numeral.js and installed using npm. I also give reference to nodemodules in index.html.

In the Browser

<script src="node_modules/numeral/numeral.min.js"></script>

but it shows

ERROR ReferenceError: numeral is not defined at NumeralFilter.transform

Initially I tried with using CDN reference, it works as I expected in the browser. But when I installed the app on real device I am getting an error "numeral is not defined".

pipe

import {Pipe,PipeTransform,Injectable} from "@angular/core"
@Pipe({
name:'numeralPipe'
})
@Injectable()
export class NumeralPipe implements PipeTransform{
    transform(count:any):any{ //eg: in count has value something like 52456.0
       var numericalFormat = numeral(count).format('0.0a');//error here
    return numericalFormat; // i have to format it like 52,5k
  }; 
}

Is there any type script library for formatting and manipulating numbers, or is there any way to do this in angular2?

try adding `declare var numeral:any` after `import {Pipe,PipeTransform,Injectable} from "@angular/core"` — Parth Ghiya, Jun 12 '17 at 07:15

score 9 · Answer 1 · answered Jun 15 '17 at 08:59

9

add package to Node Modules folder with

yarn add numeral

or

npm install numeral

then import into Typescript file

import * as numeral from 'numeral';

answered Jun 15 '17 at 08:59

Zagazag

91
2

score 2 · Accepted Answer · answered Jun 12 '17 at 07:24

2

add

declare var numeral:any

after

import {Pipe,PipeTransform,Injectable} from "@angular/core".

answered Jun 12 '17 at 07:24

Parth Ghiya

6,929
2
30
37

hey Ghiya! i have been successful in browser via cdn but when i build it app getting error on the device. so i tried to install it via npm again i am getting same error in the browser also. i have updated my question. – Sukumar MS Jun 14 '17 at 04:51
have u ensured that the js is there in dist folder, post your file strucure. you are using angular cli ? – Parth Ghiya Jun 14 '17 at 05:06
actually it is an ionic-2 app. – Sukumar MS Jun 14 '17 at 05:07
u using CDN ? or u using JS from lib ? am postive that JS Is not loaded – Parth Ghiya Jun 14 '17 at 05:09
i had installed numeral.js via npm. and gave reference in index.html as – Sukumar MS Jun 14 '17 at 05:09
i have removed cdn – Sukumar MS Jun 14 '17 at 05:10
try 1 thing for me, use CDN for JS Inclusion in index.html & let me know it works or not ? – Parth Ghiya Jun 14 '17 at 05:12
If that works, you will have to place any JS In www folder, then and only then it will be included in the build, the build wont include your node_modules, hence it gives error – Parth Ghiya Jun 14 '17 at 05:14
as i mentioned above i tried with using CDN first it works as i expected in the browser . but when i installed the app on real device i am getting error. numeral is not defined – Sukumar MS Jun 14 '17 at 05:16
because in build scripts from node_modules are not loaded.! you need to take that JS out & keep it in www folder. – Parth Ghiya Jun 14 '17 at 05:20
how can i do that? any suggestion would be Great – Sukumar MS Jun 14 '17 at 05:22
1

i dont know the best way, but from node modules, copy the JS in to www folder & change path accordingly in index.html. Anything inside www will be included in build. – Parth Ghiya Jun 14 '17 at 05:25

How to use Numeral.js library in angular2/ionic 2 typescript app?

2 Answers2

Linked