---
title: "Custom Filters in AngularJS"
description: "Custom filters in AngularJS provide a powerful way to format and transform data for display."
author: "Ashutosh Patel"
published: 2024-06-20
updated: 2024-06-20
canonical: https://www.mindstick.com/blog/304399/custom-filters-in-angularjs
category: "angular js"
tags: ["javascript", "angular js", "angularjs filter"]
reading_time: 2 minutes
---
# Custom Filters in AngularJS
#### Angular js Custom Filter
In AngularJS, **custom filters** are used to set the value of an [expression](https://www.mindstick.com/articles/1861/sqlite-expressions) to be displayed to the user. `{{ expression | filterName:argument }}` Syntax, where `filterName` is the name of the [optional](https://www.mindstick.com/interview/22851/main-difference-between-optional-and-required-keywords) filter function.
#### Defining Custom Filters
Here are the way to define the [custom filter](https://www.mindstick.com/interview/34020/how-do-filters-work-in-angularjs-and-can-you-create-a-custom-filter) in [Angular js](https://www.mindstick.com/forum/33800/how-to-add-edit-update-record-in-angular-js-in-mvc),
**Using the** `filter` **method**
```javascript
angular.module('myApp', [])
.filter('customFilter', function() {
return function(input, arg1, arg2) {
// Filter logic here
return /* transformed output */;
};
});
```
- `filter('customFilter', function() {...})` Defines a filter named customFilter.
- `return function(input, arg1, arg2) { ... }` The middle function is a filter function that accepts `input`(the value to be selected) and any other [arguments](https://answers.mindstick.com/qa/92535/what-are-the-different-types-of-arguments) (`arg1`, `arg2`).
**Injecting dependencies**\
If you need custom filter dependencies (e.g., other [functions](https://www.mindstick.com/forum/160140/explain-the-role-of-functions-as-a-service-faas-in-serverless-computing) or utilities), add them to the filter [function as](https://www.mindstick.com/forum/212/can-be-declare-a-static-function-as-virtual) you would for any AngularJS component.
#### Custom Filters
Once defined, you can apply **custom filters** to your HTML template.
```html
{{ someText | customFilter:arg1:arg2 }}
```
`someText` Text to change.\
`customFilter` The name of a predefined filter.\
`arg1`, `arg2` Optional text passed to the filter function.
## Example-
Here is a simple Angular js example to demonstrates the custom filter,
```html
ng-Root Scope
Text transform into lower case using custom filter