Angular JS Filter

AngularJS Filter

AngularJS filter is a tool, which we can use to format the data. With this filter, the user can see and modify according to the requirement. It is added in angular to format the data that is being displayed on the view part.

Syntax of Filter

With pipe character (|), we can add filters in angularJS.

Filters can club with the expression as well as a directive.

Syntax:

{{expression| name_of_filter}}

Example:

{{name | uppercase}}

Enroll Yourself in Live Classes For Angular Tutorials.

Here, a name is the expression and uppercase is the built-in filter provided by angular. It converts the name in uppercase in view part.

Use a filter in AngularJS

When we want to display the data in view part in a particular format in that scenario we can use AngularJS filter. We can display the data in the uppercase format, lowercase format etc. In whatever format, we entered the text but it can easily get displayed in any format by angular as per the type of filter used. AngularJS Filters can change the way of displaying the output.

AngularJS Filter in View Template

Filters are applied on expression to refrain the input. We can apply the AngualrJS Filter in a view template. Also, we can apply a filter on the result obtained by another filter. Chaining is the phenomenon when filters are applied to the already filtered content.

Syntax:

{{ expression | filter1 | filter2 | … }}

AngularJS Filters have arguments.

Syntax:

{{ expression | filter:argument1:argument2:… }}

Question:-When will filter get execute?

Ans-Whenever the inputs have changed in the template, the filter gets to execute.

Types of Filters in AngularJS

These are the following built-in filters, let’s discuss them one by one:

These are the following built-in filters, let’s discuss them one by one:

Uppercase

Uppercase Filter use to convert the string into an uppercase string.

If Uppercase filter is used then the string that is taken as an input in any format is formatted and gets displayed to the user in an uppercase format as an output.

Syntax:

{{expression | uppercase}}

Example:

	< !DOCTYPE html>
	< html>
	< head>
	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
	< /head>
	< bodyng-app >
	< h1>AngularJS Uppercase Filter: < /h1>
	< div ng-init="firstName='data'; lastName='flair'">
	Upper case: {{firstName + ' ' +lastName| uppercase}}< /div>
	< /body>
	< /html>
	

Output

AngularJS Uppercase Filter:

Upper case: DUCAT INDIA

Lowercase

Lowercase Filter in AngularJS uses to convert the string into a lowercase string.

If a lowercase filter is used then the string that is taken as an input in any format is formatted and gets displayed to the user in the lowercase format as an output.

Syntax:

{{expression | lowercase}}

Example:

	< !DOCTYPE html>
	< html>
	< head>
	< script>
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
	< /head>
	< bodyng-app >
	< h1>AngularJS Lowercase Filter: < /h1>
	< div ng-init="firstName='DaTa'; lastName='FlaiR'">
	Upper case: {{firstName + ' ' +lastName| lowercase}}< /div>
	< /body>
	< /html>
	

Output:

AngularJS Lowercase Filter:

Lower case: ducat india

Currency

Currency filter is used to change the convert the number in the specified currency. In case no symbol of currency is specified then by default the symbol for current locale is used.

Syntax:

{{expression |currency :’currency_symbol’:’fraction’}}

Example:

	< !DOCTYPE html>
	< html>
	< head>
	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
	< /head>
	< bodyng-app >
	Enter Amount:< input type="number"ng-model= "price">< br>
	The amount is: {{price |currency }}
	< /body>
	< /html>
	

Output

Enter Amount:

The amount is:

When you enter text in the textbox the output will be

Enter Amount:

The amount is: $5.00

Filter

It is applied only on array elements. A particular element is selected from an array based on certain condition and a new array is created from the existing array.

Syntax:

{{ expression| filter :filter_criteria}}

Example:

	< !DOCTYPE html>
	< html>
	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script>
	< body>
	< div ng-app="myApp"ng-controller="namesCtrl">
	< ul>
	< li ng-repeat="x in names | filter : 'a'">
	{{ x}}
	< /li>
	< /ul>
	< /div>
	< script>
	angular.module('myApp', []).controller('namesCtrl', function($scope){
	$scope.names = [
	'Sakshi', 
	'Simran', 
	'Ajay', 
	'Navi', 
	'Angad'
	]; 
	}); 
	< /script>
	< p>The names containing the letter "s".< /p>
	< /body>
	< /html>
	

Output:

Sakshi

Simran

The names containing the letter “s”.

Orderby

It is used to sort the data either in ascending or in descending order.

Syntax:

{{ expression|orderBy:predicate_expression: reverse}}

Date

Date filter in AngularJS use to convert the date into a string according to the specified date format.

Syntax:

{{date_expression|date :’format’}}

The various formats are:

YYYY,MM,DD,Detc

Example:

	< !DOCTYPE html>
	< html>
	< head>
	< scriptsrc="~/Scripts/angular.js">< /script>
	< /head>
	< bodyng-app>
	< div ng-init="Date = 423234234888 ">
	Default date: {{Date| date}}< br />
	Year: {{Date | date:'yyyy'}}< br />
	< /div>
	< /body>
	< /html>
	

Output:

Default date: May 31, 2020

Year:2020

Number

It is used to format the data or a numerical value taken as an input. It can add a comma or specified fraction size in it. In case the number expression doesn’t contain valid numeric data in that case number filter display an empty string.

Syntax:

{{number_expression|number:fractionSize}}

Example

	< !DOCTYPE html>
	< html>
	< head>
	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
	< /head>
	< bodyng-app >
	< h1>AngularJS Number Filter Demo: < /h1>
	Enter Price: < input type="number"ng-model="Price" />< br />
	100000| number = {{100000| number}}< br />
	Price | number = {{Price | number}}< br />
	Price | number:3 = {{Price | number:3}}< br />
	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 you enter a value in the text field then the output will be

AngularJS Number Filter Demo:

Enter Price: 8

100 | number = 100

Price | number = 8

Price | number:3 = 8.000

Price | number = 8

Enroll Yourself in Live Classes For Angular Training Online.