Built-In And Custom AngularJS Filters With Examples

This article will demonstrate built-in as well as custom AngularJS Filters with examples on Plunker Editor.

This article will demonstrate built-in AngularJS Filters as well as how you can create your own custom Filters in AngularJS. This article begins with a brief introduction to AngularJS Filters. Afterwards, it demonstrates built-in AngularJS Filter with syntax and links to an example on Plunker Editor. Finally, the article discusses custom AngularJS Filters.

AngularJS Filters

AngularJS filters are used to modify output.Through filters, you can modify output in three ways -
  1. formatting of text or numbers etc.
  2. sorting data
  3. filtering data
Built-in AngularJS Filters

AngularJS provides couple of built-in filters through which you can format your data. Their syntaxes and usage scenerios are as follow.


The Lowercase filter is used for transforming the characters of a string into lowercase. It takes a piece of string as an input and converts it into lowercase string.

  1. {{ "STRING" | lowercase }}  


Plunker- lowercase

The Uppercase filter is used for transforming the characters of a string into uppercase. It takes a piece of string as an input and converts it into uppercase string.

  1. {{ "string" | uppercase }}  


Plunker- uppercase

The Number filter is used for formatting numbers. It formats a number as text in case if the number is
  1. null or undefined nothing will be returned
  2. infinite infinity symbol will be returned
  3. not a number an empty string will be returned
  1. {{number or string | number [: fractionsize(default-3)] }}  
fractionsize is optional. It specifies the number of decimal places to round the number to. Its default value is 3.

  1. {{ 3.14156878 | number }} (default fraction size)  
  2. {{ 3 | number : 2 }} (fraction size 2)  
  1. 3.142
  2. 3.00
Plunker- number


The Currency filter is used to format numbers into currency.

  1. {{ number | currency [: symbol][: fractionsize ]| }}  
Symbol and fraction size are optional. Their default values are taken from current locale if not specified.

  1. {{ 49 | currency }} (default currency and fraction size)  
  2. {{ 49 | currency:"EURO" }} ( e.g 'EURO' currency and default fraction size)  
  3. {{ 49 | currency:"EURO" :0}} ( e.g 'EURO' currency and 0 fraction size)  
  1. $49.00
  2. EURO49.00
  3. EURO49
Plunker- currency

Date filter is used to format dates into string based on specified format.

  1. {{ Yourdate | date[ : format] [:timezone] }}  

format and timezone are optional. Angular provides number of predefined localizable formats -

  • 'medium' equals to 'MMM d, y h:mm:ss a'
  • 'short' equals to 'M/d/yy h:mm a'
  • 'fullDate' equals to 'EEEE, MMMM d, y'
  • 'longDate' equals to 'MMMM d, y'
  • 'mediumDate' equals to 'MMM d, y'
  • 'shortDate' equals to 'M/d/yy'
  • 'mediumTime' equals to 'h:mm:ss a'
  • 'shortTime' equals to 'h:mm a'

The default format is mediumDate if not specified.

  1. {{ 1288323623006 | date : 'yyyy-MM-dd HH:mm:ss Z' }}  
  2. {{1288323623006 | date:'yyyy-MM-dd'}}  
  1. 2010-10-29 08:40:23 +0500
  2. 2010-10-29
Plunker- date

The json filter is used for debugging purpose and prints the JavaScript object as JSON string

  1. {{ object | json [: spacing] }}  

spacing is optional and used for indentation purpose. Its default value is 2.


{{ { 'name' : 'abc' } | json }}


{ "name": "abc" }

Plunker- json

orderBy filter is used with ngRepeat directive and orders data by a certain field.

  1. {{ array or collection | orderBy [: expression][: reverse ][: comparator] ] }}  
expression reverse and comparator are optional.
  • expresion can be a string,function or an array
  • reverse will reverse the sorting order if its value is specified to true
  • comparator function determine the relative order

[ { id : '2' } , { id : '1' } ] | orderBy : 'id'


[ { id : '1' } , { id : '2' } ]


limitTo filter is used to limit your data upto specific length. It creates a new string or array of elemetns of specified length.

  1. {{ string,number,array | limitTo:limit [:begin] }}  
limit specifies the length of returning elements and begin specifies the index from where the limit starts. begin is optional and its default value is 0.


{{ 'abcdefghjildjkdf ' | limitTo : 3 }}




Filter is used with ngRepeat directive, and filters records for specified expression. It selects subset of array based on expression, and returns it as a new array.

  1. {{ array or collection | filter : expression [: comparator][: anyPropertyKey] }}  
Expression can be a string, object, or a function.
Comparator is optional and its value specifies the matching mechanism between the filtered value based on expression and actual array. anyPropertyKey is optional and is used to specify the property for matching.
Plunker- filter

Custom Filter

Custom filters can be created easily by using filter function of Angular module. Filter function takes two parameters - the first one is name of the filter and the second one is a function. This function itself returns a function. The inner function takes parameters for inputs on whcih you want to apply formatting, and contains logic to modify input values.

  1. angular.module('myApp').filter('CustomFilterName'function() {  
  2.     return function(inputparamter, otherparameters) {  
  3.         //inner function  
  4.         //modify input logic  
  5.         return output;  
  6.     }  
  7. }  
  8. });  
Plunker- Custom Filter Example

In this article, we saw how we can format data by using built-in AngularJS filters and how we can display data after modifications of our own choice by creating custom filters in AngularJS