AngularJS Custom Filter with Example

Details

Last Updated: 12 February 2021

Sometimes the built-in filters in Angular cannot meet the needs or requirements for filtering output. In such a case a custom filter can be created which can pass the output in the required manner.

How to Create Custom Filter

In the below example we are going to pass a string to the view from the controller via the scope object, but we don't want the string to be displayed as it is.

We want to ensure that whenever we display the string, we pass a custom filter which will append another string and displayed the completed string to the user.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> gtupapers Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Code Explanation:

Here we are passing a string "Angular" in a member variable called tutorial and attaching it to the scope object.
Angular provides the filter service which can be used to create our custom filter. The 'Demofilter' is a name given to our filter.
This is the standard way in which a custom filter is defined wherein a function is returned. This function is what contains the custom code to create the custom filter. In our function, we are taking a string "Angular" which is passed from our view to the filter and appending the string "Tutorial" to this.
We are using our Demofilter on our member variable which was passed from the controller to the view.

If the code is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

From the output,

It can be seen that our custom filter has been applied and
The word 'Tutorial' has been appended at the end of the string, which was passed in member variable tutorial.

Summary:

If there is a requirement that is not met by any of the filters defined in angular, then you can create your custom filter and add your custom code to determine the type of output you want from the filter.a