AngularJS Pipes (Built-in & Custom Filters) – 2025 Guide

Introduction – Why Learn AngularJS Pipes?

In AngularJS, what Angular (2+) calls “pipes”, AngularJS refers to as filters. These filters allow developers to format, transform, and manipulate data directly within templates—all without needing to modify the actual model.

Filters are lightweight, reusable, and highly effective when displaying formatted data like currency, dates, or customized outputs in views.

In this guide, you’ll learn:

• What filters (a.k.a. pipes) are in AngularJS
• How to use built-in filters like currency, date, filter, limitTo, uppercase, etc.
• How to create custom filters
• Best practices for clean formatting in templates

What Are Filters (Pipes) in AngularJS?

Filters in AngularJS are used to transform data before displaying it in the view. They can be applied inside {{ }} expressions or directives like ng-repeat.

Syntax:

{{ expression | filterName[:parameter] }}

Commonly Used Built-in Filters

Built-in Filter Examples

Currency Filter

<p>Price: {{ 1299.99 | currency:'₹' }}</p>

Output:
Price: ₹1,299.99

Date Filter

<p>Today is: {{ today | date:'fullDate' }}</p>

$scope.today = new Date();

Uppercase/Lowercase Filter

<p>{{ 'angularjs' | uppercase }}</p>
<!-- Output: ANGULARJS -->

LimitTo Filter

<p>{{ longText | limitTo: 50 }}...</p>

Truncates text to 50 characters.

Filter in ng-repeat

Live Search Example

<input type="text" ng-model="searchText" placeholder="Search users">
<ul>
  <li ng-repeat="user in users | filter:searchText">{{ user.name }}</li>
</ul>

$scope.users = [
  { name: 'Alice' },
  { name: 'Bob' },
  { name: 'Charlie' }
];

Typing in the input dynamically filters the user list.

Creating a Custom Filter

Step-by-Step Example: Capitalize Filter

app.filter('capitalize', function() {
  return function(input) {
    if (!input) return '';
    return input.charAt(0).toUpperCase() + input.slice(1);
  };
});

Usage:

<p>{{ 'angularjs' | capitalize }}</p>
<!-- Output: Angularjs -->

Real-World Custom Filters Use Cases

Best Practices

✔️ Keep filters pure—don’t modify external state
✔️ Use filters only in templates—not in controllers
✔️ Avoid heavy computation inside filters
✔️ Chain multiple filters carefully to avoid performance issues
✔️ Use limitTo and filter in ng-repeat for pagination/search

Summary – Recap & Next Steps

AngularJS filters (a.k.a. pipes) are a simple yet powerful way to transform data presentation without touching your actual data model. With built-in and custom filters, you can format dates, numbers, strings, and lists effortlessly.

Key Takeaways:

• Filters format or transform output before rendering
• Built-in filters like currency, date, uppercase, and filter are very handy
• Custom filters extend formatting control with reusable logic
• Filters should be used only in templates—not business logic

Real-world Relevance:
Perfect for dashboards, listings, live search, data formatting, and reusable display logic across your AngularJS app.

FAQ – AngularJS Filters (Pipes)

What are filters in AngularJS?
Filters are functions used to format or transform data before displaying it in the view. They work like pipes in Angular (2+).

Can I use multiple filters together?
Yes. You can chain filters using the pipe symbol (|). Example:

{{ value | uppercase | limitTo:5 }}

What is the difference between a filter and a directive?
A filter transforms output values, while a directive attaches behavior to DOM elements.

Where should filters be used?
Use filters inside templates like {{ expression | filter }} or within ng-repeat. Avoid using them in controllers.