AngularJS – custom currency formatting

AngularJS have a bunch of filters which allows us to format data for our needs. However we would like to have more flexibility sometimes.
In one of my last projects I need to have flexible formatting for currency values. I found some article on AngularJS Hub which presents us a power of AngularJS filters.

I did some modifications for currency filter to have it more flexible.

The filter

Below is the code of the filter. I won’t describe it as the comments are in the code.

  .filter("customCurrency", function (numberFilter) {
    function isNumeric(value) {
      return (!isNaN(parseFloat(value)) && isFinite(value));
    }

    return function (inputNumber, currencySymbol, decimalSeparator, thousandsSeparator, decimalDigits, prefixWithSymbol) {
      if (isNumeric(inputNumber)) {
        // Default values for the optional arguments
        currencySymbol = (typeof currencySymbol === "undefined") ? "$" : currencySymbol;
        decimalSeparator = (typeof decimalSeparator === "undefined") ? "." : decimalSeparator;
        thousandsSeparator = (typeof thousandsSeparator === "undefined") ? "," : thousandsSeparator;
        decimalDigits = (typeof decimalDigits === "undefined" || !isNumeric(decimalDigits)) ? 2 : decimalDigits;
        prefixWithSymbol = (typeof prefixWithSymbol === "undefined") ? true : prefixWithSymbol;

        if (decimalDigits < 0) decimalDigits = 0;

        // Format the input number through the number filter
        // The resulting number will have "," as a thousands separator
        // and "." as a decimal separator.
        var formattedNumber = numberFilter(inputNumber, decimalDigits);

        // Extract the integral and the decimal parts
        var numberParts = formattedNumber.split(".");
        
        // Replace the "," symbol in the integral part
        // with the specified thousands separator.
        numberParts[0] = numberParts[0].split(",").join(thousandsSeparator);

        // Compose the final result
        var result = numberParts[0];

        if (numberParts.length == 2) {
          result += decimalSeparator + numberParts[1];
        }

        return (prefixWithSymbol ? currencySymbol + " " : "") + result + (prefixWithSymbol ? "" : " " + currencySymbol);
      } else {
        return inputNumber;
      }
    };
  });

Usage

Usage of this filter is quite simple.

{{currencyValue | customCurrency:"PLN":".":" ":2:false}}

For the value 1234567,89 it will display us: 1 234 567.89 zł.

Working example

The working example you can find on my codepen.io