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.
Check out our Angular tutorial and get started with Angular today!
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.
e.g.
<!DOCTYPE html>
<html>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%20%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="
4. filter
It selects a subset of items from an array according to to the specified condition.
e.g.
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%20%3D%20%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="