Creating custom filters in AngularJS

In AngularJS, filters are used to transform and format data dynamically within views. While AngularJS provides built-in filters like currency, json, date, limitTo, and filter, sometimes these may not be sufficient for specific use cases. In such scenarios, we can create custom filters to suit our requirements.

---

1. Defining a Custom Filter

A custom filter is created using the .filter() method of an AngularJS module. The basic syntax is:

angular.module('myApp', [])
  .filter('customFilterName', function() {
    return function(input, optionalParam1, optionalParam2) {
        // Transformation logic
        return modifiedOutput;
    };
});

Components

• input → The data to be transformed.
• Optional parameters → Additional arguments for customization.
• Return value → The modified output.

---

2. Example: Capitalizing the First Letter of Each Word

Step 1: Define the Filter

angular.module('myApp', [])
  .filter('capitalize', function() {
    return function(input) {
      if (!input) return '';
      return input.replace(/\b\w/g, function(char) {
        return char.toUpperCase();
      });
    };
});

Step 2: Use It in HTML

<p>{{ "hello world from angular" | capitalize }}</p>

Output

Hello World From Angular

---

3. Custom Filter for Formatting Phone Numbers

Step 1: Define the Filter

angular.module('myApp', [])
  .filter('phoneFormat', function() {
    return function(input) {
      if (!input || input.length !== 10) return input;
      return '(' + input.substring(0, 3) + ') ' + input.substring(3, 6) + '-' + input.substring(6);
    };
});

Step 2: Use It in HTML

<p>{{ "9876543210" | phoneFormat }}</p>

Output

(987) 654-3210

---

4. Custom Filter for Reversing a String

Step 1: Define the Filter

angular.module('myApp', [])
  .filter('reverse', function() {
    return function(input) {
      if (!input) return '';
      return input.split('').reverse().join('');
    };
});

Step 2: Use It in HTML

<p>{{ "AngularJS" | reverse }}</p>

Output

SJralugnA

---

5. Custom Filter for Filtering Items by Condition

Step 1: Define the Filter

angular.module('myApp', [])
  .filter('filterByPrice', function() {
    return function(items, minPrice) {
      if (!items || !minPrice) return items;
      return items.filter(item => item.price >= minPrice);
    };
});

Step 2: Use It in HTML

<ul>
  <li ng-repeat="product in products | filterByPrice:50">
    {{ product.name }} - ${{ product.price }}
  </li>
</ul>

Step 3: Controller Setup

$scope.products = [
    { name: "Laptop", price: 800 },
    { name: "Mouse", price: 20 },
    { name: "Keyboard", price: 40 },
    { name: "Monitor", price: 150 }
];

Output

• Laptop – $800
• Monitor – $150

Only products with a price of $50 or more are displayed.

---

6. Using Multiple Filters Together

Filters can be chained together.

<p>{{ "angular js filters" | capitalize | reverse }}</p>

Processing Steps

1. capitalize: Converts to "Angular Js Filters".
2. reverse: Converts to "sretliF sJ ralugnA".

Output

sretliF sJ ralugnA

---

7. Performance Considerations

Avoid using complex logic inside filters as they execute every time the view updates.
For performance optimization, consider using ng-if or ng-show/ng-hide instead of filtering large lists dynamically.