This tutorial will show you, creating your own custom filters in AngularJS with simple steps and example. Angular filters provides a way to format the variable output without changing scope variable. Whenever possible use filters to keep presentation logic out of the controllers.

Angular providing a .filter() method for each module. We can write your own custom filters by using .filter() method. Let’s look at the skeleton of angular filter.

Here you can find that we are defined our module and called filter() method. Here first parameter is your filter name and second one is your callback. This callback will return the function, returned function gets invoked each time whenever Angular calls the filter, which means two-way binding is happening.

AngularJS Custom Filter Example

I am gonna create full name filter.

How to use full name filter

Let’s create a app module called “user”, which is dependent on “customFilters” module, so lets import it by mentioning it the decencies list it of user module, as shown below.

Lets see the output by using it in the HTML –

congratulations! Your first filter is ready.

Passing arguments to the filters

In templates, you can pass and separate filter arguments by colons.



That’s it.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.