How do filters work in AngularJS, and can you create a custom filter?

Question

ICSM Computer · Answer

Understanding Filters in AngularJS
Filters in AngularJS are used to format data before displaying it in the UI. They can be used in expressions, directives (ng-repeat,
ng-model, etc.), and controllers.
and 
1. Built-in Filters
AngularJS provides several built-in filters, such as:
Filter Name
Description
Example
currency
Formats a number as currency
`{{ price
date
Formats a date
`{{ dateVar
uppercase/lowercase
Converts text to uppercase/lowercase
`{{ name
limitTo
Limits array/string length
`{{ text
orderBy
Sorts an array
`ng-repeat="item in items
filter
Filters an array based on a condition
`ng-repeat="item in items
2. Creating a Custom Filter
You can create a custom filter using the .filter() method in an AngularJS module.
Example: Capitalize the First Letter
Step 1: Define the Filter
app.filter('capitalize', function() {
    return function(input) {
        if (!input) return '';
        return input.charAt(0).toUpperCase() + input.slice(1);
    };
});
Step 2: Use in HTML
andlt;pandgt;{{ 'hello world' | capitalize }}andlt;/pandgt; 
andlt;!-- Output: Hello world --andgt;
and 
3. Custom Filter with Parameters
You can pass additional arguments to a custom filter.
Example: Custom Filter to Append a String
Filter Definition
app.filter('append', function() {
    return function(input, suffix) {
        if (!input) return '';
        return input + suffix;
    };
});
Usage in HTML
andlt;pandgt;{{ 'Angular' | append:'JS' }}andlt;/pandgt; 
andlt;!-- Output: AngularJS --andgt;
4. Custom Filter for Filtering Arrays
Filters can also modify arrays dynamically.
Example: Filter Even Numbers
Filter Definition
app.filter('evenNumbers', function() {
    return function(numbers) {
        return numbers.filter(num =andgt; num % 2 === 0);
    };
});
Usage in HTML
andlt;ulandgt;
    andlt;li ng-repeat="num in [1,2,3,4,5,6] | evenNumbers"andgt;
        {{ num }}
    andlt;/liandgt;
andlt;/ulandgt;
and 
5. Performance Consideration
Avoid using filters inside ng-repeat for large lists, as they get re-evaluated every digest cycle. Instead, pre-process the data in the controller:
$scope.filteredItems = $filter('filter')($scope.items, searchText);

interview

How do filters work in AngularJS, and can you create a custom filter?

ICSM Computer

Can you answer this question?

1 Answers

Understanding Filters in AngularJS

1. Built-in Filters

2. Creating a Custom Filter

3. Custom Filter with Parameters

4. Custom Filter for Filtering Arrays

5. Performance Consideration

Liked By

Filter Name	Description	Example
`currency`	Formats a number as currency	`{{ price
`date`	Formats a date	`{{ dateVar
`uppercase/lowercase`	Converts text to uppercase/lowercase	`{{ name
`limitTo`	Limits array/string length	`{{ text
`orderBy`	Sorts an array	`ng-repeat="item in items
`filter`	Filters an array based on a condition	`ng-repeat="item in items