🧹 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

Filter	Description	Example Syntax
currency	Formats a number as currency	`{{ price
date	Formats date/time values	`{{ today
uppercase	Converts text to uppercase	`{{ name
lowercase	Converts text to lowercase	`{{ name
filter	Filters an array based on a string or object	`ng-repeat=”user in users
limitTo	Limits array/string output length	`{{ description
orderBy	Sorts an array by a property	`ng-repeat=”item in items

---

💡 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

Filter Name	Purpose
truncate	Shorten long paragraphs or strings
yesNo	Display ‘Yes’ or ‘No’ based on boolean
statusLabel	Convert status codes to readable text
phoneFormat	Format phone numbers (e.g., (123) 456)

---

⚙️ 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.

---

Share Now :