How to create and use filters in AngularJS

Overview

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

Output:

Your first name is ADESH

Currency Filter

Output:

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.

Output:

Looping with objects:

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

lowercase Filter

Output:

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.

Output:

My Custom Filter
  • AdEsH
  • DeNiS
  • MoRrIs
  • MaRy
  • RoSy
  • RoBeRt

Injecting filters in controllers, directives, and services

We can easily inject filters in our controllers, directives and services. We are going to use filter filter for our demonstration purpose. This filter reduces the arrays into subarrays based on our filter condition. It is advisable to use filters in our controllers, directives, and services instead of our view template as filter in view template reevaluate on every digest life cycle, which can be very costly by performance wise.

In our below example, our controller is going to call the filter directly. In this way, our filter will be called by controller when data is loaded either from backend or the filter expression has been changed.

Output:

Names before filter
Tiger  Texax  Ruby  Peter  Adam  Mary  James  
Names after filter that contains “t”
Tiger  Texax  Peter  

Summary

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.

Cheers!

Read more:

Adesh

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