What are filters in AngularJS?

Sandra Emily 1177 24 Jun 2024

1 Answers

Ravi Vishwakarma 24 Jun 2024

Filters in AngularJS are used to format the value of an expression for display to the user. They can be applied in view templates, controllers, or services, and they allow you to transform data in various ways. Filters are particularly useful for tasks such as formatting dates, currency, filtering arrays, and modifying strings.

In the angularJs filter are two types

Built-in Filters
Custom Filters

Built-in Filters

AngularJS provides several built-in filters, including:

currency: Formats a number as a currency (e.g., $1,234.56).
date: Formats a date to a specified format.
filter: Selects a subset of items from an array.
json: Formats an object as a JSON string.
limitTo: Limits the array or string to a specified number of elements or characters.
lowercase: Converts a string to lowercase.
number: Formats a number as a text string.
orderBy: Orders an array by an expression.
uppercase: Converts a string to uppercase.

currency Filter:
<p>{{ amount | currency }}</p>
<!-- If amount is 1234.56, this will display $1,234.56 -->

date Filter:
<p>{{ today | date:'fullDate' }}</p>
<!-- If today is a Date object, this will display the full date format, e.g., Monday, April 1, 2024 -->

uppercase Filter:
<p>{{ message | uppercase }}</p>
<!-- If message is "hello", this will display HELLO -->

Custom filter

In AngularJS, custom filters are used to set the value of an expression to be displayed to the user.

app.filter('reverse', function() {
    return function(input) {
        if (!input) return '';
        return input.split('').reverse().join('');
    };
});

Use them

<p>{{ message | reverse }}</p>
<!-- If message is "hello", this will display "olleh" -->

Read more

Filters in AngularJS

Custom Filters in AngularJS

What is a Filter and how to use it in AngularJS, Explain with an Example.

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

What are filters in AngularJS?

Can you answer this question?

1 Answers