How to create and use filters in AngularJS


AngularJS filters are used to format the data. There are different types of AngularJS filters. These are:

  • uppercase: format a string to upper case.
  • currency: format a number to a currency
  • filter: select a subset of items from an array
  • date: date formatting filter
  • json: format an object to a json string
  • lowercase: convert string to lowercase
  • number: convert string to number
  • orderBy: sort an array by an expression

These are the AngularJS built-in filters. These can be used in several places of your application like in views template, controllers or services.

AngularJS filters are used as a ‘|’ pipe character with an expression. You can define your own filters, which is called Custom filters.

Filter Usage

Here are some examples about how to user different filter.

uppercase Filter


Your first name is ADESH

Currency Filter


Total price is : $50.00

Filter Filter

This filter is used only with an array, and we are using the orderBy filter here to sort the country name.


Looping with objects:

  • Denis, Canada
  • Ruby, China
  • Mary, England
  • Jordan, Norway
  • John, Russia
  • Thomas, Sweden
  • Adesh, USA

lowercase Filter


Your last name is adesh

Custom Filters

In addition to AngularJS filters, we can create our own filter. It is very easy to create your own custom filter. You have to register your filter with the application module. We are going to create our custom filter named myCustomFilter. Let’s take a look at below code.


My Custom Filter


In this blog, we learned about how to create and use different types of filters in AngularJS application. We also learned about our custom filter and used them in our view template and in our controller. Filters are great way to format application data.


Read more:

Introduction to Module and Directives in AngularJS

Factory and Services in AngularJS


Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has 3 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu
%d bloggers like this: