How to create a custom filter in AngularJs

By | October 24, 2016

How to create a custom filter in AngularJs

Today in this we are going to learn how to create custom filter in AngularJs . I’ll create simple filter with full explanation and code. You can find these filter on CodePen website and are publicly available.

Anatomy of an Angular Filter

custom-angular-filters

Angular exposes a simple API for creating a filter. Just as you would declare a controller with

, you can create a new filter by appending

to your Angular app.

A filter is very similar to an factory or service in many regards but has the added advantage of behaving on a global scope once created. As we have previously seen, you can invoke a filter on both the data binding in your html or directly inside of your controller or directive by using the

service. Let’s break down the structure of a filter.

This may seem confusing from the get go, so let’s jump to some examples that will demystify writing custom filters.

Our First Custom Filter

Let’s start off slow and simple. The first custom filter we’ll write will convert numbers to their ordinal values, meaning that if we apply our ordinal filter to say the number 43, what will be displayed is “43rd”. Let’s look at the code for our ordinal filter.

Applying this filter to our views is straightforward:

will yield 25th. If we were to apply the ordinal filter to a string, such as

we would simply get the string not a number lol back.

It is a good practice to ensure you have appropriate data to filter, and if you do not simply return the unmodified data back. Take a look at the CodePen below for some additional examples.

 

See the Pen Custom Filter In Angularjs | Ordinal Number | Chainwebber.com by Mukesh Singh (@chainwebber) on CodePen.

Capitalizing on Custom Filters

Sorry for the bad joke. The next custom filter we build will capitalize either the first letter or a letter we specify. The additional parameter will specify which letter to capitalize, if no additional parameter is passed than the first letter will be capitalized.

This is a bit of a contrived example and has no real practical uses but we’ll use it to show off how you could extend your filters.

Again, applying this filter is very simple. If we wanted to capitalize a specific letter, we could pass the optional parameter such as:

and this would return the result of onOmatopoeia.

See the Pen Custom Filter In AngularJs | Capitalize | Chainwebber.com by Mukesh Singh (@chainwebber) on CodePen.

Filters That Actually Filter

In the previous examples, we applied filters to single items, now let’s apply a filter to a collection. In this example, we will actually filter a data set.

In programming, there are hundreds of ways to reach the end goal, and in this example what we’ll filter a list and return only the items that match a certain criteria.

We will go through a list of programming languages and display only the statically typed ones. Easy enough right?

 

See the Pen Custom Filter In AngularJs | Static Languages by Mukesh Singh (@chainwebber) on CodePen.

Custom Currencies

In the first example, we looked at creating a simple custom filter that only did one thing (and hopefully did that one thing well). Next, let’s take a look at how we can create a filter that accepts additional parameters.

The idea for this filter comes from Pierre Adrian who was wondering whether the built-in currency filter supports the ability to choose what side the currency symbol goes on. Unfortunately, it does not, so we’ll build our own custom currency filter that does!

In the US it is standard practice to place the $ symbol before the amount (i.e. $9.99), but in certain countries it is customary to place the symbol after the amount (i.e 9.99$).

For our custom filter, we will allow the user to pass two parameters. The first will be the symbol or string they want to use to denote the currency, and second a true or false boolean value that will determine whether the symbol is added before or after the amount.

We will default the symbol to the dollar sign ($) and the position to before of the amount so that if those aren’t passed the filter still works.

One thing to note when dealing with filters that support multiple parameters: you must pass the parameters in the correct order! You do not have to pass all the parameters, so in our custom currency filter it is perfectly acceptable to pass only the symbol, but you cannot only pass the location of where you want the symbol to display.

If you wanted to change only the order, you would still need to pass in the symbol such as {{ 25 | customCurrency:'$':false }}

See the Pen Custom Filter In AngularJs | Custom Currency | Chainwebber.com by Mukesh Singh (@chainwebber) on CodePen.

Conclusion

Today we built our own custom AngularJS filters. We learned how to create filters from scratch, built filters that did single tasks and created filters that had extended functionality. Filters can be a powerful tool for extending the presentation of your applications. What are some custom filters you would like to see?

One thought on “How to create a custom filter in AngularJs

  1. Pingback: How to create a custom filter in AngularJs - AngularJS News

Comments are closed.