What are Filters in AngularJS ?

In this article, we will be discussing filters in AngularJS. Filters can be added in AngularJS to format data to display on UI without changing the original format. Filters can be added to an expression or directives using the pipe | symbol.

{{expression | filterName:parameter }}

AngularJS Filters: AngularJS provides filters to transform data of different data types. The following table shows the significant filters:

• currency: It is used to convert a number into a currency format.
• date: It is used to convert a date into a specified format.
• filter: It is used to filter the array and object elements and return the filtered items.
• json: To convert a JavaScript object into JSON.
• limitTo: It is used to return an array or a string that contains a specified number of elements.
• lowercase: It is used to convert a string into lowercase letters.
• uppercase: It is used to convert a string into uppercase letters.
• number: It is used to convert a number into a string or text.
• orderBy: It sorts an array based on specified predicate expressions.

Currency Filter: This filter is used to convert a number into a currency format. When no currency format is implemented, the currency filter uses the local currency format.

Syntax: 

{{ currency_expression | currency : symbol : fractionSize}}

Example 1: This example describes the Currency Filter in AngularJS.

Output:

👁 Image

Date Filter: This filter is used to convert a date into a specified format. If the date format is not specified, then the default format of date is used ‘MMM d, yyyy'.

Syntax:

{{ date | date : format : timezone }}

Example 2: This example describes the Date Filter in AngularJS.

Output:

👁 Image

filter Filter: This filter is used to filter the array and object elements and return a new array.

Syntax:

{{ expression | filter : filter_criteria }}

Example 3: This example describes the filter Filter in AngularJS.

Output:

👁 Image

json Filter: This filter is used to convert a JavaScript object into JSON.

Syntax: 

{{ object | json : spacing }}

Example 4: This example describes the json Filter in AngularJS.

Output:

👁 Image

limitTo Filter: This filter is used to return an array or a string that contains a detailed number of elements. It is used for strings and numbers. It returns a string containing only the specified number of digits and characters.

Syntax:

{{ object | limitTo : limit : begin }}

Parameters:

• limit: Specifies the length of the returned array or strings.
• Begin: Specifies the index with which the limitation begins. By default, its value is zero.

Example 5: This example describes the limitTo Filter in AngularJS.

Output:

👁 Image

lowercase: This filter is used to convert a string into lowercase letters.

Syntax:

{{expression|lowercase}}

Example 6: This example describes the lowercase Filter in AngularJS.

Output: 

👁 Image

uppercase: This filter is used to convert a string into an uppercase letter.

Syntax:

{{ string | uppercase}}

Example 7: This example describes the uppercase Filter in AngularJS.

Output:

👁 Image

number Filter: This filter is used to convert a number into a string or text.

Syntax:

{{ string| number : fractionSize}}

Example: This example describes the number Filter in AngularJS.

Output:

👁 Image

orderBy Filter: This filter sorts an array based on specified predicate expressions.

Syntax:

{{ orderBy_expression | orderBy : expression : reverse }} 

Example 9: This example describes the orderBy Filter in AngularJS.

Output:

👁 Image