---
title: "How do filters work in AngularJS, and can you create a custom filter?"  
description: "How do filters work in AngularJS, and can you create a custom filter?"  
author: "Ravi Vishwakarma"  
published: 2025-03-30  
updated: 2025-03-30  
canonical: https://www.mindstick.com/interview/34020/how-do-filters-work-in-angularjs-and-can-you-create-a-custom-filter  
category: "angular js"  
tags: ["javascript", "angular js"]  
reading_time: 4 minutes  

---

# How do filters work in AngularJS, and can you create a custom filter?

### Understanding Filters in AngularJS

Filters in **AngularJS** are used to format data before displaying it in the UI. They can be used in expressions, directives (`ng-repeat`, `ng-model`, etc.), and controllers.

#### 1. Built-in Filters

AngularJS provides several built-in filters, such as:

| **Filter Name** | **Description** | **Example** |
| --- | --- | --- |
| `currency` | Formats a number as currency | `{{ price |
| `date` | Formats a date | `{{ dateVar |
| `uppercase/lowercase` | Converts text to uppercase/lowercase | `{{ name |
| `limitTo` | Limits array/string length | `{{ text |
| `orderBy` | Sorts an array | `ng-repeat="item in items |
| `filter` | Filters an array based on a condition | `ng-repeat="item in items |

#### 2. Creating a Custom Filter

You can create a custom filter using the `.filter()` method in an AngularJS module.

## Example: Capitalize the First Letter

## Step 1: Define the Filter

```javascript
app.filter('capitalize', function() {
    return function(input) {
        if (!input) return '';
        return input.charAt(0).toUpperCase() + input.slice(1);
    };
});
```

## Step 2: Use in HTML

```html
<p>{{ 'hello world' | capitalize }}</p>
<!-- Output: Hello world -->
```

#### 3. Custom Filter with Parameters

You can pass additional arguments to a custom filter.

## Example: Custom Filter to Append a String

## Filter Definition

```javascript
app.filter('append', function() {
    return function(input, suffix) {
        if (!input) return '';
        return input + suffix;
    };
});
```

## Usage in HTML

```html
<p>{{ 'Angular' | append:'JS' }}</p>
<!-- Output: AngularJS -->
```

#### 4. Custom Filter for Filtering Arrays

Filters can also modify arrays dynamically.

## Example: Filter Even Numbers

## Filter Definition

```javascript
app.filter('evenNumbers', function() {
    return function(numbers) {
        return numbers.filter(num => num % 2 === 0);
    };
});
```

## Usage in HTML

```html
<ul>
    <li ng-repeat="num in [1,2,3,4,5,6] | evenNumbers">
        {{ num }}
    </li>
</ul>
```

### 5. Performance Consideration

1. Avoid using filters inside `ng-repeat` for large lists, as they get re-evaluated every digest cycle. Instead, pre-process the data in the controller:

```javascript
$scope.filteredItems = $filter('filter')($scope.items, searchText);
```

## Answers

### Answer by Ravi Vishwakarma

### Understanding Filters in AngularJS

Filters in **AngularJS** are used to format data before displaying it in the UI. They can be used in expressions, directives (`ng-repeat`, `ng-model`, etc.), and controllers.

#### 1. Built-in Filters

AngularJS provides several built-in filters, such as:

| **Filter Name** | **Description** | **Example** |
| --- | --- | --- |
| `currency` | Formats a number as currency | `{{ price |
| `date` | Formats a date | `{{ dateVar |
| `uppercase/lowercase` | Converts text to uppercase/lowercase | `{{ name |
| `limitTo` | Limits array/string length | `{{ text |
| `orderBy` | Sorts an array | `ng-repeat="item in items |
| `filter` | Filters an array based on a condition | `ng-repeat="item in items |

#### 2. Creating a Custom Filter

You can create a custom filter using the `.filter()` method in an AngularJS module.

## Example: Capitalize the First Letter

## Step 1: Define the Filter

```javascript
app.filter('capitalize', function() {
    return function(input) {
        if (!input) return '';
        return input.charAt(0).toUpperCase() + input.slice(1);
    };
});
```

## Step 2: Use in HTML

```html
<p>{{ 'hello world' | capitalize }}</p>
<!-- Output: Hello world -->
```

#### 3. Custom Filter with Parameters

You can pass additional arguments to a custom filter.

## Example: Custom Filter to Append a String

## Filter Definition

```javascript
app.filter('append', function() {
    return function(input, suffix) {
        if (!input) return '';
        return input + suffix;
    };
});
```

## Usage in HTML

```html
<p>{{ 'Angular' | append:'JS' }}</p>
<!-- Output: AngularJS -->
```

#### 4. Custom Filter for Filtering Arrays

Filters can also modify arrays dynamically.

## Example: Filter Even Numbers

## Filter Definition

```javascript
app.filter('evenNumbers', function() {
    return function(numbers) {
        return numbers.filter(num => num % 2 === 0);
    };
});
```

## Usage in HTML

```html
<ul>
    <li ng-repeat="num in [1,2,3,4,5,6] | evenNumbers">
        {{ num }}
    </li>
</ul>
```

### 5. Performance Consideration

1. Avoid using filters inside `ng-repeat` for large lists, as they get re-evaluated every digest cycle. Instead, pre-process the data in the controller:

```javascript
$scope.filteredItems = $filter('filter')($scope.items, searchText);
```


---

Original Source: https://www.mindstick.com/interview/34020/how-do-filters-work-in-angularjs-and-can-you-create-a-custom-filter

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.