What are filters in AngularJS?

Sandra Emily 545 24 Jun 2024

Sandra Emily

Student

Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

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.

forum

What are filters in AngularJS?

Can you answer this question?

1 Answers