AngularJS is a robust front-end framework that aids in building dynamic web applications. One of the appealing features of AngularJS is its ability to transform data using filters. This article aims to demystify filters in AngularJS, including built-in filters and custom filters, which you can use to manipulate data in your application effectively.

What Are Filters in AngularJS?

In AngularJS, filters are used to format data displayed to users in the views. They can transform text, format dates, filter arrays, and much more without modifying the original data. Filters can be used in expressions, directives, and controllers.

Built-in Filters

AngularJS provides several built-in filters, which are extremely handy for handling common data transformations.

Here are a few popular built-in filters:

1. currency: Format a number as currency.
2. date: Format a date to a string using a specified format.
3. filter: Filter an array based on a given expression.
4. orderBy: Order an array by specified criteria.

Let's explore some of these built-in filters with examples.

Example: Formatting Currency

<div ng-app="myApp" ng-controller="myCtrl">
  <p>Original Price: {{ price }}</p>
  <p>Formatted Price: {{ price | currency }}</p>
</div>

<script>
  angular.module("myApp", []).controller("myCtrl", function($scope) {
    $scope.price = 123.45;
  });
</script>

In the above example, the currency filter formats the price value into a currency format (e.g., $123.45).

Example: Formatting Dates

<div ng-app="myApp" ng-controller="myCtrl">
  <p>Original Date: {{ myDate }}</p>
  <p>Formatted Date: {{ myDate | date:'fullDate' }}</p>
</div>

<script>
  angular.module("myApp", []).controller("myCtrl", function($scope) {
    $scope.myDate = new Date();
  });
</script>

This example shows the date filter, which takes a date object and formats it according to the specified format ('fullDate' in this case).

Creating Custom Filters

While built-in filters handle many common scenarios, you might need to create custom filters for specific needs. Custom filters allow for more flexibility and targeted functionality.

How to Create a Custom Filter

1. Define your AngularJS application module.
2. Use .filter() to create a custom filter.
3. Implement your filtering logic in a function.

Example: Creating a Custom Filter to Reverse a String

<div ng-app="myApp" ng-controller="myCtrl">
  <p>Original String: {{ myString }}</p>
  <p>Reversed String: {{ myString | reverse }}</p>
</div>

<script>
  angular.module("myApp", []).controller("myCtrl", function($scope) {
    $scope.myString = "Hello, AngularJS!";
  })
  .filter('reverse', function() {
    return function(input) {
      if (!input) return input; 
      return input.split('').reverse().join('');
    };
  });
</script>

In the code snippet above, we defined a custom filter named reverse. It takes an input string, splits it into an array of characters, reverses that array, and then joins it back into a reversed string.

Using Custom Filters with Parameters

Custom filters can also take parameters to modify their behavior.

Example: Custom Filter Changing Case

<div ng-app="myApp" ng-controller="myCtrl">
  <p>Original String: {{ myString }}</p>
  <p>Uppercase: {{ myString | changeCase:'uppercase' }}</p>
  <p>Lowercase: {{ myString | changeCase:'lowercase' }}</p>
</div>

<script>
  angular.module("myApp", []).controller("myCtrl", function($scope) {
    $scope.myString = "Hello, AngularJS!";
  })
  .filter('changeCase', function() {
    return function(input, caseType) {
      if (!input) return input; 
      if (caseType === 'uppercase') {
        return input.toUpperCase();
      } else if (caseType === 'lowercase') {
        return input.toLowerCase();
      }
      return input; // default
    };
  });
</script>

In this example, we've created a changeCase filter that can convert a string to uppercase or lowercase based on the provided parameter.

Summary of Key Points

• AngularJS filters are a powerful way to format data directly in your templates.
• Built-in filters like currency, date, filter, and orderBy can efficiently handle common tasks.
• Custom filters allow for tailored functionalities to meet specific needs, enhancing the usability of your applications.

Understanding how to use both built-in and custom filters can significantly elevate your AngularJS development experience. Embrace the power of filters to create cleaner and more user-friendly applications.