How to create a custom filter in AngularJs

How to create a custom filter in AngularJs

  • How to create a custom filter in AngularJs
  • Angular exposes a simple API for creating a filter.
  • 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 take a look at how we can create a filter that accepts additional parameters .
  • For our custom filter, we will allow the user to pass two parameters.

How to create a custom filter in AngularJs. it is very similar to an factory or service in many regards but has the added advantage of many.

@ebuddyworld: 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.

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.

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.

// Setup the filter app.filter(‘ordinal’, function() { // Create the return function // set the required parameter name to **number** return function(number) { // Ensure that the passed in data is a number if(isNaN(number) || number < 1) { // If the data is not a number or is less than one (thus not having a cardinal value) return it unmodified. return number; } else { // If the data we are applying the filter to is a number, perform the actions to check it's ordinal suffix and apply it. var lastDigit = number % 10; if(lastDigit === 1) { return number + 'st' } else if(lastDigit === 2) { return number + 'nd' } else if (lastDigit === 3) { return number + 'rd' } else if (lastDigit > 3) { return number + ‘th’ }

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.

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.

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?

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!

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$).

boolean value that will determine whether the symbol is added before or after the amount.

) 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.

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?

How to create a custom filter in AngularJs

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.