Creating Custom Filters In AngularJS

Introduction

AngularJS filters cover many common uses such as formatting dates and currencies, limiting the number of items to be displayed, etc. The filters are helpful to how we may improve the workflow while building Angular apps.

In my previous article, we saw built-in AngularJS filters. We can also write our own custom filter. To create custom filter, we need to just register the filter in factory function in our module. This uses the "filterProvider" internally. By default new filter function takes the input value as the first argument and factory function will return the new filter. We can also pass additional arguments to the filter function.

The filter function should be stateless i.e. it should be pure function. AngularJS execute the filter function based on filter input.

The following are some rules to set the filter name:

• Name with special character (like hyphens and dots) is not allowed.
• If we want to add namespace to filter, we can use capitalization or underscores.
• Filter Name must not be the same as standard AngularJS filters.

AngularJS has built-in method called "filter", which can help us to create custom filter.

Syntax:

app.filter('name of filter', function () {
return function () {
return;
};
});

The returned functions in filter are getting invoked every time when AngularJS call the filter. It means that their is a two-way binding for our filter. When user makes any changes in expression, the filter runs again and updates the data.

Let us take a simple example of creating custom filter that converts our string to upper case. However this filter is already contained by the AngularJS library.

Custom filter