How to apply currency filter to input field?

Ionic Framework ionic-v3
1

Hi,
I need to apply currency filter to ionic input field. Is this possible ? If not how to achieve this.
Thanks in advance.

1 Like
2

Hey, I have the same problem. I’m on it and will let you know as soon as I have a solution to it. :wink:

1 Like
3

Angular has a build in currency/locale module (AngularJS).
To install it you have to run the following command:

npm install angular-i18n

and include it in your index.html

<script src="/node_modules/angular-i18n/angular-locale_YOUR-LOCALE.js"></script>

You can find more information here: GitHub - angular/bower-angular-i18n: internationalization module for AngularJS

Including the script didn’t work for me. So i pulled out the one i needed, e.g. angular-locale_de-de.js, and added it manullay to my index.html.

  ...
  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="lib/ionic/js/angular/angular-resource.min.js"></script>

  <!-- locale de -->
  <script src="js/angular-locale_de-de.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="js/ng-cordova.min.js"></script>
  <script src="cordova.js"></script>
  ...

After that you just use the currency filter in your template and it displays the correct curreny symbol and formatting.

  <strong>{{account.balance | currency}}</strong>

I hope this works for you too :wink:

1 Like
4

Any answer? any way to apply currency filter to an input field?

Thank you

5

I would look into using numeral.js.

6

The problem is not how to format the numbers, you can do it with filters and pipes, the problem is how to format them in an INPUT FIELD.

At least, that it what I understand in the topic subject.

Thank you

7

Yes, the question is for formatting the numbers in input fields. I solved this problem with the help of following tutorial.
https://blog.ngconsultant.io/custom-input-formatting-with-simple-directives-for-angular-2-ec792082976#.5hvkyhcw4
I made some changes to that to full fill my requirement. Hope this helps.

8

Hey man! Can you help me?

I have installed the angular-i18n. I can see these file contents in node_modules directory, including the file that I want (angular-locale_pt-br.js)

So, like you said, I changed my index.html including the folloing line:

<script src="/node_modules/angular-i18n/angular-locale_YOUR-LOCALE.js"></script>
Changed:
<script src="/node_modules/angular-i18n/angular-locale_pt-br.js"></script>

When I try to run it, I have a 404 error. So I created a new folder in www called js and included just the angular-locale_pt-br.js file in this directory.
Now when I run it I have an
Uncaught ReferenceError: angular is not defined
** at angular-locale_pt-br.js:2**

Openning the file I can see that the first line have a called to angular module.
I know that the right way is to use the files in nome_modules folder. So, can you give me some tips to fix it?

Thank you!

9

You are importing angular-locale_pt-br.js before angular.
There’s how it should look like in your index.html:

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/angular-locale_pt-br.js"></script>
10

Thanks for reply.

I noticed that importing the libs direct from node_modules doesnt work.
So I created a new folder called js in src.

<script src="js/angular/angular.js"></script>
<script src="js/angular-locale_pt-br.js"></script>

Ok. Its not giving the 404 error, but the currency format isnt in the right way. Actually, our money is formated with a comma IN cents and a period (".") for thousants.
I has open a new thread to search for a solution.

Thanks again.

New thread: Currency code with i18N - BRL