Following are the topics that we will cover in this blog today.

What is AngularJS Filter?

AngularJS 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 AngularJS?

AngularJS filters are used when the data needs to be displayed in a particular format in the view part. Data can be displayed in the 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.

Various AngularJS Filters

AngularJS Filters alter the data and it can be implemented to directives and expressions by a pipe character. Filters in AngularJS are –

  1. Lowercase
  2. Uppercase
  3. Currency
  4. Filter
  5. order by
  6. Date
  7. Number

1. lowercase

It is used to convert the text to lower case text. It formats strings into lower case.
e.g.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="Name='Intellipaat'">
<p>Name: {{ Name | lowercase }}</p>
</div>
</body>
</html>

Output

Name: intellipaat

2. uppercase

It is used to convert the text to the upper case text. It formats strings into upper case.
e.g.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="Name='Intellipaat'">
<p>Name: {{ Name | uppercase }}</p>
</div>
</body>
</html>

Output

Name: INTELLIPAAT

3. currency

It formats a number into a currency format.
e.g. 

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" >
Salary: <input type="number" ng-model="salary">
<p>Total = {{salary | currency }}</p>
</div>
</body>
</html>

 Output

Salary: 100
Total = $100.00

Watch this TypeScript vs JavaScript Tutorial Video for Beginners:

AngularJS Filters

4. filter

It selects a subset of items from an array according to to the specified condition.

e.g.

<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<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 details= angular.module("details", []);
details.controller('studentController', function($scope) {
$scope.student = {
subjects:[
{name:'English',marks:85},
{name:'Math',marks:90},
{name:'Physics',marks:80},
{name:'Chemistry',marks:75}
]
};
});
</script>
</body>
</html>

Output

output5

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'">
{{ subject.name + ', marks:' + subject.marks }}
</li>

Output

output6

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'}}

The various formats are YYYY, MM ,DD, D etc.

Example:

<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
<div ng-init="Date = 0867610000000 "> <!--423234234888-->
Default date: {{Date| date}} <br />
Year: {{Date | date:'yyyy'}} <br />
</div>
</body>
</html>

Output:

Default date: June 30, 1997
Year: 1997

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:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app >
<h1>AngularJS Number Filter Demo: </h1>
Enter Book Name:<br /> <input type="name" /> <br />
Enter Price: <br /> <input type="number" ng-model="Price" /> <br /><br />
100 | number = {{100 | number}} <br />
Book Price | number = {{Price | number}} <br />
Book Price | number:2 = {{Price | number:2}} <br />
Book Price | number = <span ng-bind="Price | number"></span>
</body>
</html>

Output:

AngularJS Number Filter Demo:
Enter Price: 
100 | number =
Price | number =
Price | number:3 =
Price | number =

When a value is entered in the text field, then the output will show as:

AngularJS Number Filter Demo:
Enter Price: 123
100 | number = 100
Book Price | number = 123
Book Price | number:2 = 123.00
Book Price | number = 123

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:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-filter-reverse-production</title>
  <script src="//code.angularjs.org/1.7.7/angular.min.js"> 
  </script>
  <script src="script.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="ReverseFilter">
  <div ng-controller="ReverseController">
  <input ng-model="msg" type="text"><br>
Without Filter Content: {{msg}}<br>
Reverse Filter Content: {{msg|reverse}}<br>
Uppercase Filter on Reverse Filter: {{msg|reverse:true}}<br>
</div>
</body>
<script>
(function(angular) {
  'use strict';
angular.module('ReverseFilter', [])
  .filter('reverse', function() {
  return function(input, uppercase) {
  input = input || '';
  var out = '';
  for (var x = 0; x < input.length; x++) {
   out = input.charAt(x) + out;
   }

   // conditional applying on reversed string to make uppercase
   if (uppercase) {
     out = out.toUpperCase();
    }
    return out;
  };
})
    .controller('ReverseController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {
  $scope.msg = 'intellipaat';
  $scope.filteredMessage = reverseFilter($scope.msg);
 }]);
})(window.angular);

</script>

</html>

Output:

intellipaat
Without Filter Content: intellipaat
Reverse Filter Content: taapilletni
Uppercase Filter on Reverse Filter: TAAPILLETNI

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 $controller, UpperCase;
beforeEach(module('core'));

beforeEach(inject(function ($filter) {
UpperCase = $filter('UpperCase');
}));
});

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.

Preparing for a Job interview? Check out our Top Angular Interview Questions!

Course Schedule

Name Date
Web Development Courses 2022-08-13 2022-08-14
(Sat-Sun) Weekend batch
View Details
Web Development Courses 2022-08-20 2022-08-21
(Sat-Sun) Weekend batch
View Details
Web Development Courses 2022-08-27 2022-08-28
(Sat-Sun) Weekend batch
View Details

Leave a Reply

Your email address will not be published. Required fields are marked *

Find Best AngularJS Training in Other Regions

Bangalore Hyderabad Chennai Mumbai