Angular Tutorial – Part 4: Understanding and implementing Filters

In this article we will look at the concept of filters in Angular. We will look at a few built in filters and see how we can create custom filters in Angular.js.


Link to complete series

  1. Angular Tutorial – Part 1: Introduction to Angular.js
  2. Angular Tutorial – Part 2: Understanding Modules and Controllers
  3. Angular Tutorial – Part 3: Understanding and using Directives
  4. Angular Tutorial – Part 4: Understanding and implementing Filters
  5. Angular Tutorial – Part 5: Understanding and implementing Services
  6. Angular Tutorial – Part 6: Building and Validating Data Entry Forms
  7. Angular Tutorial – Part 7: Understanding Single page applications and Angular routing

Background

There are times when we would want to post process the retrieved data before showing it on the view. One example of this could be that we might want to format a particular string value in certain format for example we might have retrieved the price of a product from the database and we want to display in the local currency format. Or perhaps we might want to apply some conversion rate on the retrieved value and display the local value price of the product. Another example of such could be that we might want to have the contents of the application translated to local language before displaying it to the user. Or in the simplest of scenarios we want to sort the retrieved data in some particular order before displaying it to the user.

Filters in angular provides an excellent way of post processing the retrieved data, do some data manipulation before rendering it on the view. Filters provide a clear syntax to perform data manipulation and formatting as per our needs without writing too much code. There are a lot of built in filters available in angular and angular also let us create our own custom filters.

In this article, we will look at how we can use filters in angular, we will look at the usage of some built in filters and try to create a custom filters to understand how we can create our own filters to cater to our application needs.

Using the code

Lets start by looking at how we can use filters in our application. Using filters is pretty straight forward. We just need to pipe (|) the data that we want to process into the filter.

If we want to provide some additional formatting information as a parameter to the filters, we can do that by using : with the filter expression as

If we want to apply multiple filters on any data then we can chain these filter expressions one after the other using the same pipe (|) symbol.

Now to fully get the grasp of how filters work, let us look at the few built in filters in angular.

uppercase and lowercase

Perhaps the most simple case of post processing the data is to change the casing of a given string. Angular provides two filters called uppercase and lowercase for this purpose. We just need to pipe the data into this filter and the string will be converted accordingly. Following image shows how this can be done in the view.

Angular4_1

number

The number filter let the application know that the given string should be treated as a number. It can be used the following manner.

If we want to specify the number of decimal places, we can pass that as a parameter to the filter. So lets say that we want to look at the five decimal places, the filter usage will look like.

The following image shows how we can use the number filter in the view where quantityis the variable defined on scope.

Angular4_2

date

Date filter let us treat any given string as data and also let us control the display format of the date.

If we want to take control of the display format, we can use the format string as an argument to the filter.

Note: To look at the various date format specifiers for date, please refer to angular documentation.

currency

Currency filter also works same as date and number. If we want to indicate that a particular string should be treated as currency, we can use this filter.

Also if we want to provide our own currency symbol then we can pass that too as a parameter to the filter.

limitTo

limitTo is a filter that can let us limit the number of items we want to render on the view. If we use limitToon a string, it will limit the number of characters that will be displayed on the view.

If we use limitTofilter in a ng-repeat expression, it will limit the number of items that will be shown to the user from that collection. So if we want to show only two items from a list, we can use the limitToattribute in the following manner.

Angular4_3

limitTowith ngRepeatis particularly very useful when we want to implement paging functionality on the views.

orderBy

orderBy filter can be used to sort the data based on some specific criteria. Lets say we want to display the booksdisplayed in the order of IDs, we can specify it in form of a filter as.

If we want to order it in the descending order of IDs, we can use the – to indicate that we want to order in the descending order as:

filter

filteris another filter available in angular which can be used to filter some items from a collection. It will look at all the fields of the collection and will display the items that contains the string present in the filter parameter. So if we want to show the books that contain the word ‘test’, we do this this in the following manner.

Note: In the sample application, the use of filters like orderBy, filter are generalized and provided as user selectable values. Following image shows the screen shot of how it looks. Please look at the sample application to see how this is being done by using the above mentioned filters in action.

Angular4_4

json

The json filter can be used to view the json representation of any object. This is very useful when we have to call any remote service that is expecting a json payload. this could also be used for debugging and trouble shooting purposes. So lets say if we want to view the json payload of of books collection, we can do something like following.

And when we look at the result on the view we can see the json payload for this collection of books.

Angular4_5

Using filters in Controllers and Services

The filter usage that we have seen so far is from the views perspective. But there could be scenarios where we might want to use the filters from the JavaScript components like controllers and services. Angular also let us use the filters in the components where we can use the $filter to call the filter in the following manner.

If we want to pass the filter parameter, we can pass it as the second argument. For example if we want to filter a number to have up to 5 places of decimal, we can do that in the following manner.

Creating a custom Filter

Angular also lets us create our own custom filters for the scenarios where the built in filters are not sufficient. Lets see how we can create a custom filter in angular. Lets say we want to create a filter where we want to create a filter that will calculate the power of the given number with the provided parameter. If no parameter is provided then the power value will be taken as 1.

To create the custom filter, we need to register the filter definition with the angular module in the following manner.

What the above code is doing is that it is creating a filter called power that will take an input and a parameter for the power value and uses Math.Pow to return the result.

From the usage perspective, now this filter can be used as any other filter. so {{ 2 | power }}will return 2 and {{ 2 | power:4 }}will return 16.

Point of interest

In this article we looked at the basic of filters in angular. We have looked at a few built in filters in angular. We saw how we powerful filters can be when it comes to some post processing and data manipulations. We saw various ways of using filters and how we can write our own custom filters. This article has been written from beginner’s perspective. I hope this has been informative.

Download the sample code from here: SampleApp4

One thought on “Angular Tutorial – Part 4: Understanding and implementing Filters