Filters in Angular.js tutorial

Angular.js filters are designed to filter data .They are especially helpful in views templates if you want to transform your data to another format .Filters work by siply take an input array ,filter or select a subset of the input array according to some condition(s) .There are two types of filters in Angular.js

Built in filters .

Angular.js provides developers with a set of filters designed for formatting data in views but can also be called withtin other directives and controllers .

Custom filters .

If the built in filters don't solve your partuclar needs .Angular.js offers you the possibility to build your own custom filter to apply to your views .

You can use filters for diffrent tasks such as

Formatting dates .

Formatting currencies .

Filtering arrays of data etc.

The general syntax of filters looks like

{{ input | filter }} 

You use | to apply a filter to some expression .

You can also chain multiple filters by applying all your filters at once using |

{{ input  filter0 | filter1 | filter 2 | ... | filtern }}   

In this case each filter takes as input the result of the previous filter .

The uppercase filter

This is a string filter that transforms the input string to uppercase .It's useful if you want your data to be deisplayed in uppercase for any input string

{{ textString1 | uppercase }}

The lowercase filter

{{ textString1 | lowercase }}

The limitTo filter

{{ textString1 | limitTo: '40' }}

{{ textString1 | limitTo: '-40' }}

Angular.js provides filter for working with numbers and currencies For rounding a number

{{ number | number: 2 }}

The currency filter

{{ price1 | currency }}   //default currency filter

{{ price | currency:'€' }}

Date filters

{{ date1 | date }} {{ date1 | date:'fullDate' }} {{ date1 | date:'MM' }}

The orderBy filter

This filter allows you to apply an order by operation to your arrays directly in your views

ng-repeat="item in items | orderBy : predicate: reverse "

Angular.js custom filters

Angular.js allows you to create your own custom filters just like you create directives and controllers .The general syntax of a custom filter looke like

app.filter('myFilter', function(){

    //return a function that takes some input and return an ouput after processing the input
    return function (input,args) {

        return output; 

There are two types of custom filters in Angular.js

Single value filters which take a single value as their input .

Array filters whihc take an array as their input .

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status