Angular Custom Filters

The custom filters is a filter that allow you to create your own custom filters (
like number, date and currency etc.) logic with help of your own array expressions.  

The custom filters syntax:-

custom currency filter:-  {{ salary |currency:"$"}}

The custom date filter:-   {{date |date:"yyyy-MM-dd HH:mm:ss Z"}}
The custom number filter:- {{ numberExpressions | number : fraction_Size}}

You can see the above format filters example in details.

<!DOCTYPE html>
<head lang="en">
    <meta charset="utf-8">
    <title>Formatting Filters</title>
    <script src="//"></script>
        var app = angular.module('filtersApp', []);

        app.controller('filtersCtrl', function ($scope) {
            $scope.salary = 15000;

        app.filter('fraction_Currency', ['$filter', '$locale',
          function (filter, locale) {
              var currency_Filters = filter('currency');
              var decimalFormat = locale.NUMBER_FORMATS;

              return function (amountVal, currencyType) {
                  var currencyValue = currency_Filters(amountVal, currencyType);

                  var result = currencyValue.indexOf(decimalFormat.DECIMAL_SEP);

                  if (amountVal >= 0) {
                      return currencyValue.substring(0, result);
                  } else {
                      return currencyValue.substring(0, result) + ')';
<body ng-app="filtersApp">
        <h1>Formatting Filters</h1>
    <div ng-controller="filtersCtrl">
        <h4>{{salary | fraction_Currency }} AND {{-salary | fraction_Currency}}</h4>
        <h4>{{salary |  currency }} AND {{-salary | currency }}</h4>

The output as below,

About Blogger


Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...

    Blogger Comment
    Facebook Comment
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book