AngularJS filters are tools used to format data displayed in views without modifying the original data. They can transform text to lowercase or uppercase, format numbers, dates, or currencies, and even filter or sort arrays. In this article, we will explore more about angular filters.
Table of Contents
What are Angular Filters?
Angular filters help with the formatting of the value of an expression that is displayed to the user with no change to the original format. An example is if you want a string in lowercase or uppercase, which can be achieved using the AngularJS filters. Built-in filters like ‘lowercase’, and ‘uppercase’ are available, which can generate lowercase and uppercase output as necessary.
When to use a filter in Angular?
Angular filters are used when the data needs to be displayed in a particular format in the view part. Data can be displayed in lowercase format, uppercase format, and more. AngularJS filters can change the way the output is displayed.
Whatever text it is and in whichever format it is in, the text can be easily displayed in any format by AngularJS depending on the filter type that is used.
Filters are useful when you want to:
-
- Format data directly in the view
- Avoid extra logic in your controller
- Apply transformations like casing, sorting, filtering, or formatting numbers/currency
Use filters with the | (pipe) character in your expressions.
Various Angular Filters
AngularJS Filters alter the data and it can be implemented to directives and expressions by a pipe character. Filters in AngularJS are –
-
- Lowercase
- Uppercase
- Currency
- Filter
- order by
- Date
- Number
1. lowercase
It is used to convert the text to lower case text. It formats strings into lower case.
Example
<div ng-app="" ng-init="Name='Intellipaat'">
<p>Name: {{ Name | lowercase }}</p>
</div>
Output
Name: intellipaat<br>
2. uppercase
It is used to convert the text to the upper case text. It formats strings into upper case.
Example
<div ng-app="" ng-init="Name='Intellipaat'">
<p>Name: {{ Name | uppercase }}</p>
</div>
Output
Name: INTELLIPAAT
3. currency
It formats a number into a currency format.
Example
<div ng-app="">
Salary: <input type="number" ng-model="salary">
<p>Total = {{ salary | currency }}</p>
</div>
Output
Salary: 100<br>
Total = $100.00<br>
4. filter
It selects a subset of items from an array according to to the specified condition.
Example
<div ng-app="details" ng-controller="studentController">
Enter subject: <input type="text" ng-model="subjectName">
<ul>
<li ng-repeat="subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks: ' + subject.marks }}
</li>
</ul>
</div>
<script>
var app = angular.module("details", []);
app.controller("studentController", function($scope) {
$scope.student = {
subjects: [
{name: 'English', marks: 85},
{name: 'Math', marks: 90},
{name: 'Physics', marks: 80},
{name: 'Chemistry', marks: 75}
]
};
});
</script>
Output
5. orderBy
It orders an array according to the specified condition. You can use orderBy as follows in the above application:
e.g.
<li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'"><br>
{{ subject.name + ', marks:' + subject.marks }}<br>
</li><br>
Output
If you are an AngularJS enthusiast, enroll in the Angular Certification Course and get certified now!
6. Date
The date filter in AngularJS can be used to convert the date into a string as per the specified date format.
Syntax
{{date_expression | date : 'format'}}<br>
The various formats are YYYY, MM ,DD, D etc.
Example
<div ng-init="Date = 0867610000000">
Default date: {{ Date | date }} <br>
Year only: {{ Date | date:'yyyy' }}
</div>
Output
Default date: June 30, 1997<br>
Year: 1997<br>
Get 100% Hike!
Master Most in Demand Skills Now!
7. Number
The number filter can be used to format any data or numerical value taken as an input. It can add a comma or convert to the specified fraction size. In the case of invalid numeric data in the number expression, the number filter will display an empty string.
Syntax:
{{ number_expression | number:fractionSize}}
Example:
<div ng-app>
Enter Price: <input type="number" ng-model="Price"><br><br>
Book Price (default): {{ Price | number }}<br>
Book Price (2 decimals): {{ Price | number:2 }}<br>
</div>
Output
AngularJS Number Filter Demo:<br>
Enter Price:<br>
100 | number =<br>
Price | number =<br>
Price | number:3 =<br>
Price | number =<br>
When a value is entered in the text field, then the output will show as:
AngularJS Number Filter Demo:<br>
Enter Price: 123<br>
100 | number = 100<br>
Book Price | number = 123<br>
Book Price | number:2 = 123.00<br>
Book Price | number = 123<br>
Custom Filters in AngularJS
Let’s now discuss the customized filters that AngularJSa allows to create. A custom filter can be created by registering a filter factory function in a module. The AngularJS filter function should be a pure function, meaning it should produce the same result as per the given input, and it should not have any effect on an external state.
Example:
<div ng-app="ReverseFilter" ng-controller="ReverseController">
<input ng-model="msg" type="text"><br><br>
Without Filter: {{ msg }}<br>
Reversed: {{ msg | reverse }}<br>
Reversed Uppercase: {{ msg | reverse:true }}<br>
</div>
<script>
angular.module('ReverseFilter', [])
.filter('reverse', function() {
return function(input, uppercase) {
input = input || '';
var out = '';
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
if (uppercase) out = out.toUpperCase();
return out;
};
})
.controller('ReverseController', function($scope) {
$scope.msg = 'intellipaat';
});
</script>
Output:
intellipaat<br>
Without Filter Content: intellipaat<br>
Reverse Filter Content: taapilletni<br>
Uppercase Filter on Reverse Filter: TAAPILLETNI<br>
Testing of Custom Filters
Filtered code can be tested like any other code. beforeEach (module(‘core’)) loads the core module into the injector. Core module contains the checkmark filter.
describe('UserName', function () {
var UpperCase;
beforeEach(module('core'));
beforeEach(inject(function ($filter) {
UpperCase = $filter('UpperCase');
}));
it('should convert text to uppercase', function () {
expect(UpperCase('hello')).toBe('HELLO');
});
});
Conclusion
In conclusion, AngularJS filters are built-in services in Angular that can be used to format the data. The data is gathered as input from users and displayed to them in a filtered manner in the view part. There are different AngularJS filters available used for filtering data.