A filter formats the value of an expression to display to the user.
For example, if you want to have your strings in either in lowercase or all in uppercase, you can do this by using filters in Angular.
There are built-in filters such as 'lowercase', 'uppercase' which can retrieve the output in lowercase and uppercase accordingly. Similarly for numbers, you can use other filters.
During the course of this chapter, we will see the different filters available in Angular and on how you can create your own custom filters.
In this tutorial, you will learn-
Standard filter in Angularjs
Angular JS provides the following list of standard built-in filters.
- Lowercase – This filter takes on a string output and formats the string and displays all the characters in the string as lowercase.
Let's look at an example of AngularJS filters with the lowercase option.
In the below example, we will use a controller to send a string to a view via the scope object. We will then use a filter in the view to convert the string to lowercase.
Code Explanation:
- Here we are passing a string, which is a combination of lowercase and uppercase characters in a member variable called "tutorialName" and attaching it to the scope object. The value of the string being passed is "AngularJS".
- We are using the member variable "tutorialName" and putting a filter symbol (|) which basically means that the output needs to be modified by using a filter. We then use the lowercase keyword to say to use the built-in filter to output the entire string in lowercase.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output
- It can be clearly seen that the string "AngularJS" which was passed in the variable tutorialName which was a combination of lowercase and uppercase characters has been executed.
- After execution, the final output is in lowercase as shown above.
- Uppercase – This filter is similar to the lowercase filter, the difference is that takes on a string output and formats the string and displays all the characters in the string as uppercase.
Let's look at an example of Angular JS filters with the lowercase option.
In the below example we will use a controller to send a string to a view via the scope object. We will then use a filter in the view to convert the string to uppercase.
Code Explanation:
- Here we are passing a string which is a combination of lowercase and uppercase characters "Angular JS" in a member variable called "tutorialName" and attaching it to the scope object.
- We are using the member variable "tutorialName" and putting a filter symbol (|), which basically means that the output needs to be modified by using a filter. We then use the uppercase keyword to say to use the built-in filter to output the entire string in uppercase.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
- It can be clearly seen that the string which was passed in the variable tutorialName which was a combination of lowercase and uppercase characters has been outputted in all uppercase.
- Number - This filter formats a number and can apply a limit to the decimal points for a number.
Let's look at an example of AngularJS filters with the number option.
In the example below,
We wanted to showcase how we can use the number filter to format a number to display with a restriction of 2 decimal places.
We will use a controller to send a number to a view via the scope object. We will then use a filter in the view to apply the number filter.
Code Explanation:
- Here we are passing a number with a larger number of decimal places in a member variable called tutorialID and attaching it to the scope object.
- We are using the member variable tutorialID and putting a filter symbol (|) along with the number filter. Now in number:2, the 2 indicates that the filter should restrict the number of decimal places to 2.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
- It can be clearly seen that the number which was passed in the variable tutorialID which had a large number of decimal points has been limited to 2 decimal places because of the number: 2 filter which was applied.
- Currency - This filter formats a currency filter to a number.
Suppose, if you wanted to display a number with a currency such as $, then this filter can be used.
In the below example we will use a controller to send a number to a view via the scope object. We will then use a filter in the view to apply the current filter.
Code Explanation:
- Here we are passing a number in a member variable called tutorialprice and attaching it to the scope object.
- We are using the member variable tutorialprice and putting a filter symbol (|) along with the currency filter. Note that the currency which is applied depends on the language settings which are applied on the machine.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output
- It can be clearly seen the currency symbol has been appended to the number which was passed in the variable tutorialprice.
- In our case since the language settings are English (United States), the $ symbol is inserted as the currency.
- json - This filter formats a JSON like input and applies the JSON filter to give the output in JSON.
In the below example we will use a controller to send a JSON type object to a view via the scope object. We will then use a filter in the view to apply the JSON filter.
Code Explanation:
- Here we are passing a number in a member variable called "tutorial" and attaching it to the scope object. This member variable contains a JSON type string of Tutorial ID:12, and TutorialName:"Angular".
- We are using the member variable tutorial and putting a filter symbol (|) along with the JSON filter.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
- It can be clearly seen that the JSON like string is parsed and displayed a proper JSON object in the browser.
Custom Filter in Angularjs
Sometimes the built-in filters in Angular cannot meet the needs or requirements for filtering output. In such a case a custom filter can be created which can pass the output in the required manner.
In the below example we are going to pass a string to the view from the controller via the scope object, but we don't want the string to be displayed as it is.
We actually want to ensure that whenever we display the string, we pass a custom filter which will append another string and displayed the completed string to the user.
Code Explanation:
- Here we are passing a string "Angular" in a member variable called tutorial and attaching it to the scope object.
- Angular provides the filter service which can be used to create our own custom filter. The 'Demofilter' is a name given to our filter.
- This is the standard way in which a custom filter is defined wherein a function is returned. This function is what contains the custom code to create the custom filter. In our function, we are taking a string "Angular" which is passed from our view to the filter and appending the string "Tutorial" to this.
- We are using our Demofilter on our member variable which was passed from the controller to the view.
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
- It can be clearly seen that our custom filter has been applied and
- The word 'Tutorial' has been appended at the end to the string, which was passed in member variable tutorial.
Summary:
- Filters are used to change the way the output is displayed to the user.
- Angular provides built-in filters such as the lowercase and uppercase filters to change the output of strings to lower and uppercase respectively.
- There is also a provision for changing the way numbers are displayed by using the number filter by specifying the number of decimal points to be displayed in the number.
- One can also use the currency filter to append the currency symbol to any number.
- If there is a requirement to have json specific output, angular also provides the JSON filter for filtering any JSON like string into JSON format.
- Finally, if there is a requirement that is not met by any of the filters defined in angular, then you can create your own custom filter and add your own custom code to determine the type of output you want from the filter.a
