Post
Ask Question

Creating Custom Pipes in AngularJS

Pipes (also known as filters in AngularJS) are a powerful feature that allows you to transform data displayed in your templates. AngularJS provides several built-in filters, but there are times when you need to create custom filters to meet your specific needs. This article will guide you through the process of creating custom pipes (filters) in AngularJS.

Prerequisites

  • Basic understanding of AngularJS.
  • AngularJS development environment set up.

What is a Pipe/Filter?

In AngularJS, filters allow you to format the data displayed to the user. They can be used in view templates, controllers, or services. Filters are easy to use and come with built-in support for chaining, which means you can use multiple filters together to achieve the desired output.

Built-in Filters

AngularJS provides several built-in filters, such as.

  • currency: Formats a number as a currency.
  • date: Format date to a specified format.
  • filter: Selects a subset of items from an array.
  • json: Formats an object as a JSON string.
  • lowercase: Converts a string to lowercase.
  • uppercase: Converts a string to uppercase.
  • number: Formats a number as text.
  • orderBy: Orders an array by an expression.
  • limitTo: Creates a new array or string containing only a specified number of elements.

Creating a Custom Pipe/Filter

To create a custom filter, you need to register it with your AngularJS module using the filter method. A filter is simply a function that takes input, processes it, and returns the processed output.

Below is an AngularJS application that demonstrates the use of several built-in filters (currency, date, filter, json, lowercase, uppercase, number, orderBy, limitTo) along with the custom capitalize filter we created earlier.

HTML File (index.html)

<!DOCTYPE html>
<html ng-app="customFilterApp">
<head>
    <title>AngularJS Filters Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="MainController">
    <h1>AngularJS Filters Example</h1>
    <!-- Currency Filter -->
    <h2>Currency Filter:</h2>
    <p>{{ amount | currency }}</p>
    <!-- Date Filter -->
    <h2>Date Filter:</h2>
    <p>{{ currentDate | date:'fullDate' }}</p>
    <!-- Filter Filter -->
    <h2>Filter Filter:</h2>
    <p>Original Array: {{ names | json }}</p>
    <p>Filtered Array: {{ names | filter:'John' }}</p>
    <!-- JSON Filter -->
    <h2>JSON Filter:</h2>
    <p>{{ person | json }}</p>
    <!-- Lowercase Filter -->
    <h2>Lowercase Filter:</h2>
    <p>{{ message | lowercase }}</p>
    <!-- Uppercase Filter -->
    <h2>Uppercase Filter:</h2>
    <p>{{ message | uppercase }}</p>
    <!-- Number Filter -->
    <h2>Number Filter:</h2>
    <p>{{ number | number:2 }}</p>
    <!-- OrderBy Filter -->
    <h2>OrderBy Filter:</h2>
    <p>Original Array: {{ people | json }}</p>
    <p>Ordered Array by Name: {{ people | orderBy:'name' | json }}</p>
    <!-- LimitTo Filter -->
    <h2>LimitTo Filter:</h2>
    <p>{{ names | limitTo:2 | json }}</p>
    <!-- Custom Capitalize Filter -->
    <h2>Custom Capitalize Filter:</h2>
    <p>{{ message | capitalize }}</p>
</body>
</html>

JavaScript File (app.js)

// app.js
angular.module('customFilterApp', [])
.controller('MainController', ['$scope', function($scope) {
    $scope.amount = 1234.56;
    $scope.currentDate = new Date();
    $scope.names = ['John', 'Jane', 'Doe', 'Smith'];
    $scope.person = {name: 'John Doe', age: 30, occupation: 'Developer'};
    $scope.message = "hello world!";
    $scope.number = 1234.56789;
    $scope.people = [
        {name: 'John', age: 30},
        {name: 'Jane', age: 25},
        {name: 'Doe', age: 35},
        {name: 'Smith', age: 28}
    ];
}])
.filter('capitalize', function() {
    return function(input) {
        if (!input) return input;
        return input.charAt(0).toUpperCase() + input.slice(1);
    };
});

Explanation of Filters

  1. Currency Filter
    • Formats a number as a currency.
    • {{ amount | currency }} will display 1234.56 as $1,234.56 (or the default currency symbol for your locale).
  2. Date Filter
    • Formats date to a specified format.
    • {{ currentDate | date:'fullDate' }} will display the current date in a full-date format (e.g., Friday, July 18, 2024).
  3. Filter Filter
    • Selects a subset of items from an array.
    • {{ names | filter:'John' }} will display only the names that contain 'John'.
  4. JSON Filter
    • Formats an object as a JSON string.
    • {{ person | json }} will display the person object as a JSON string.
  5. Lowercase Filter
    • Converts a string to lowercase.
    • {{ message | lowercase }} will display hello world!.
  6. Uppercase Filter
    • Converts a string to uppercase.
    • {{ message | uppercase }} will display HELLO WORLD!.
  7. Number Filter
    • Formats a number as text.
    • {{ number | number:2 }} will display 1234.57.
  8. OrderBy Filter
    • Orders an array by an expression.
    • {{ people | orderBy:'name' | json }} will display the people array ordered by the name property.
  9. LimitTo Filter
    • Creates a new array or string containing only a specified number of elements.
    • {{ names | limitTo:2 | json }} will display the first two names in the names array.
  10. Custom Capitalize Filter
    • Capitalizes the first letter of a string.
    • {{ message | capitalize }} will display Hello world!.

With this setup, you can see how each filter transforms the data. This is a powerful feature in AngularJS that helps in presenting data in a more readable and user-friendly manner.


Similar Articles