How to use a Custom Service Inside a Filter in AngularJS ?

Last Updated : 28 Mar, 2023

AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of any value, function, or feature that an application needs. A service is a class with a narrow and well-defined purpose.

In AngularJS, a Service is a function that is available to use in your AngularJS app and consists of various services like $location, $http, $timeout, etc. AngularJS helps in constantly supervising the application, and also in handling changes and events properly.

Steps to create a custom service inside a filter: The below steps will be utilized for the creation of custom Services inside the Filter:

Step 1: Create an Angular Service

Before we can use a custom service inside a filter, we need to create the service itself. To do this, we use the service() method of the AngularJS module object. For creating our own custom service, first, connect the service to the module:

angApp.service("capitalService", function () {
    this.capitalize = function (input) {
       return input.toUpperCase();
    };
});

Step 2: Adding into a filter to custom service

After creating and connecting the service to the application, we can use the service for any directive, filter, etc inside other services. A filter is a function that takes an input value and returns a transformed output value. Filters can be used in expressions to modify the data displayed on the page. To use the service inside a filter first, add it as a dependency while defining the filter.

angApp.filter("capitalFilter", function (capitalService) {
    return function (input) {
       return capitalService.capitalize(input);
    };
});

Step 3: Using the custom filter

Now, we can use the filter in HTML when displaying values from an array.

<input type="text" ng-model="myText" />
<p>{{ myText | capitalFilter }}</p>

Example 1: In this example, we have created a custom service named: "capitalizeService" with a capitalize method that returns the uppercase version of a given string inputted by the user.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
    </script>

    <script>
        var angApp = angular.module("myApp", []);
        angApp.service("capitalService", function () {
            this.capitalize = function (input) {
                return input.toUpperCase();
            };
        });
        angApp.filter("capitalFilter", 
        function (capitalService) {
            return function (input) {
                return capitalService.capitalize(input);
            };
        });
    </script>
</head>

<body style="text-align: center">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2>
        Using a custom service inside a filter
    </h2>
    <input type="text" ng-model="myText" />
    <p>{{ myText | capitalFilter }}</p>
</body>

</html>

Output:

Example 2: In this example, we have created another service named: "truncService" which has a truncate method that takes an input string and a length parameter. If the input string is longer than the specified length, it returns the first length characters along with the (...) character.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
    </script>

    <script>
        angular.module('myApp', [])
            .service('truncService', function () {
                this.truncate = function (input, length) {
                    if (input.length > length) {
                        return input.substring(0, length) 
                            + '...';
                    } else {
                        return input;
                    }
                };
            })
            .filter('truncFilter', function (truncService) {
                return function (input, length) {
                    return truncService.truncate(input, length);
                };
            });
    </script>
</head>

<body style="text-align: center">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2>
        Using a custom service inside a filter
    </h2>
    <input type="text" ng-model="myText" />
    <p>{{ myText | truncFilter:10 }}</p>
</body>

</html>

Output:

In conclusion, Using custom services inside filters in AngularJS can increase the flexibility and power of our web application. By creating custom services that perform complex data transformations, we can easily reuse that logic across multiple components. We can use these services inside filters which helps in modifying the data displayed on the page in a clean and expressive way. With these tools at your disposal, you can build powerful and dynamic web applications with ease.

How to use a Custom Service Inside a Filter in AngularJS ?

tarunsinghwap7

How to use a Custom Service Inside a Filter in AngularJS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?