How to Format a String Using AngularJS currency Filter

angularjs

← PrevNext →

The AngularJS currency Filter works very much like the number filter. However, it will format the text (a number) and displays the value prefixed with the “$” (dollar) symbol. The “$” is the default symbol, when no other symbol is defined.

-----------------

If you are new to AngularJS, then I recommend you to read my first article that I have written for beginners.

👉 AngularJS Tutorial for Beginners – My First AngularJS App “Hello World”

-----------------

There are two ways (or methods) you can use a currency filter to format a string in an AngularJS app. In the first method, you can apply the filter to an HTML template (either using an expression or in a directive). The second method is to use the filter in a Controller using JavaScript. This article covers both the methods one by one.

Syntax (Using an Expression)

{{ currency_expression | currency : symbol : fractionSize}}

Syntax (Using a Controller in JavaScript)

$filter('currency')(amount, symbol, fractionSize)

👉 AngularJS “currency” Filter Rupee or Euro
Currency Filter in AngularJS

* Using “currency” Filter with in an Expression

In the first method, I’ll add the “currency” filter with a variable in an Expression. I have defined the variable (bid) using an ng-model directive.

The Markup
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body style="font:15px Verdana;">
    <div ng-app>
        <p>
            <label>Enter a number</label>
            <input type="text" ng-model="bid" />
        </p>

        <p> {{ bid | currency }} </p>
    </div>
</body>
</html>
Try it

Filter "currency" with Decimal values

A currency value is a number, and numbers have decimal values too. The default currency is value is displayed with “two” decimal values. However, you can either remove or add decimal values according to your requirement, by assigning a parameter to the filter also known as fractionSize.

If you want to add “three”, decimal values to the filter, then you must do this.

<p> {{ bid | currency: "$" : 3 }} </p>

Set the parameter to “0” to remove decimal values.

<p> {{ bid | currency: "$" : 0 }} </p>

* Using an AngularJS “currency” Filter in a Controller Using JavaScript

The Markup
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body style="font:15px Verdana;">
    <div ng-app="biddingApp" ng-controller="bidController">
        <p>
            <label>Enter a number</label>
            <input type="text" ng-model="bid" />
        </p>

        <p> {{ result }} </p>
    </div>
</body>

<script>
    var bidApp = angular.module('biddingApp', []);

    bidApp.controller(
        'bidController',
        function ($scope, $filter) {

            $scope.$watch('bid', function (val) {

                $scope.result = $filter('currency')(val);

            }, true);
        }
    );
</script>
</html>
Try it

Before defining the controller, I have initialized the AngularJS application. Later, I have injected the “$filter” object along with the “$scope” object to the controller. Finally, I have defined the currency filter to get the desired result in my view.

Conclusion

What we have learned in this article, are two basic methods for defining the currency filter in AngularJS. The filter shows a “$” (dollar) symbol with each value inside the template. However, we do thousands of transactions using various other currencies. Therefore, it would be nice, if we knew what other symbols we may add with currency filter, other than the default symbol, which is the “$”.

The below links explains how to show a specific currency in AngularJS other than the default symbol.

Similar example:

👉 Show Currency Symbols Other than Dollar, Such as Rupee or Pound using AngularJS “currency” Filter
Show currency symbols

← PreviousNext →