
Quick Contact
Angular Tutorial
- What is Angular JS
- Features of Angular JS
- Angular JS Uses
- Angular JS Advantages and Disadvantages
- Angular JS Modules
- Angular JS DOM
- Angular JS Directives and its Types
- Angular JS Data Binding
- Angular JS Controllers
- AngularJS MVC
- Angular JS Expressions
- AngularJSng-view
- AngularJSng-include
- What is AngularJS Scope?
- Angular JS Scope Characteristics
- Angular JS Event
- Angular JS Filter
Angular Interview Questions
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.