What is a Parameterized pipe ?

Last Updated : 19 Apr, 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. The Filters(|) are generally added to the expressions by using the pipe (|) character, which makes formatting and working with data easier. The Filters are major categorized into 2 pipes/filters, i.e. the Built-in pipes & the custom pipes, & Under Built-in pipes, it is further categorized into 2 types, namely, the Parameterized Pipes & the Chaining Pipes. In this article, we’ll see what is a parameterized pipe in Angular js, along with a basic way to implement it with the help of examples.

A Parameterized Pipe is a part of angular that accepts one or more parameters. The pipe parameters are passed to the pipe function as an argument so that they can be used to modify the input data. They are useful when we need to transform data in a specific way based on a certain condition or user input.

Approaches: We will implement the concept of the Parameterized Pipe in the following manner:

1. Using Built-in pipes: AngularJS provides several built-in pipes that can be used for common data transformations like DatePipe, CurrencyPipe, LowerCasePipe, etc. The currencyPipe is one such pipe that is a built-in parameterized pipe used to format numbers as currency. It accepts a currency code as a parameter, which specifies the type of currency to use in the formatting.

Syntax:

<div ng-app="gfgApp" ng-controller="myCtrl">
    <p>Fare: {{ fare | currency: 'USD' }}</p>
</div>

Example 1: Below example demonstrates using a currencyPipe pipe that formats the price variable as currency, which is INR in this case.

HTML

<!DOCTYPE html>
<html ng-app="myApp">
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
    </script>
</head>
 
<body ng-controller="myCtrl">
    <h1 style="color: green;">
         GeeksforGeeks
    </h1>
    <h3>Using the CurrencyPipe</h3>
    <p>
        Fare: {{ fare | currency: 'INR' }}
    </p>
 
    <script>
        var gfgApp = angular.module('myApp', []);
        gfgApp.controller('myCtrl', function($scope) {
            $scope.fare = 50.99;
        });
    </script>
</body>
 
</html>

Output:

2. Using custom pipes: In some cases, the built-in pipes may not be enough for your needs. In such cases, you can create your own custom pipes. Here is an example of how to create a custom parameterized pipe that accepts a multiplier as a parameter and multiplies each element of an array by that value:

Syntax:

<div ng-app="gfgApp" ng-controller="myCtrl">
    <p>Your string: {{ input }}</p>
    <p>
        Reversed string: 
        {{ input | reverseString: true }}
    </p>
</div>

Example 2: Below example demonstrates using a custom that reverses the string and converts it into the uppercase string.

HTML

<!DOCTYPE html>
<html ng-app="myApp">
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
    </script>
</head>
 
<body ng-controller="myCtrl">
    <h1 style="color: green;">
         GeeksforGeeks
    </h1>
    <h3>Using the custom pipe</h3>
 
    <p>Enter any string: {{ input }}</p>
    <p>
        The reversed string is: {{ input | revString: true }}
    </p>
 
    <script>
        var gfgApp = angular.module('myApp', []);
        gfgApp.controller('myCtrl', function($scope) {
            $scope.input = "geeksforgeeks";
        });
         
        gfgApp.filter('revString', function () {
            return function (input, uppercase) {
                var output = "";
                for (var i = input.length - 1; i >= 0; i--) {
                    output += input.charAt(i);
                }
                if (uppercase) {
                    output = output.toUpperCase();
                }
                return output;
            }
        });
    </script>
</body>
 
</html>