7 Built-in Filters in AngularJS

Key Concepts

AngularJS provides a set of built-in filters that allow you to format data directly within your views. These filters can be used to transform strings, numbers, arrays, and other data types into more readable and user-friendly formats. Understanding these filters is essential for creating dynamic and interactive web applications.

1. currency

The currency filter formats a number as a currency. It adds the appropriate currency symbol and can also include a specified number of decimal places. This filter is useful for displaying monetary values in a consistent format.

Example:

        <p>Price: {{ 1234.56 | currency }}</p>
    

Output:

        Price: $1,234.56
    

Imagine currency as a cashier who takes a raw number and converts it into a neatly formatted price tag, complete with the correct currency symbol.

2. date

The date filter formats a date object or a timestamp into a human-readable string. You can specify various formats, such as short, medium, long, and custom formats. This filter is handy for displaying dates in a consistent and readable manner.

Example:

        <p>Today: {{ '2023-10-05T12:00:00Z' | date:'medium' }}</p>
    

Output:

        Today: Oct 5, 2023, 12:00:00 PM
    

Think of date as a calendar that takes a raw date and transforms it into a neatly arranged, easy-to-read format.

3. filter

The filter filter is used to filter an array based on a specified criteria. You can filter by a string, object, or function. This filter is useful for creating dynamic lists that update based on user input or other conditions.

Example:

        <input ng-model="searchText">
        <ul>
            <li ng-repeat="item in items | filter:searchText">{{ item }}</li>
        </ul>
    

Imagine filter as a librarian who helps you find books (items) by searching through the catalog (array) based on your query (searchText).

4. json

The json filter converts a JavaScript object into a JSON string. This filter is useful for debugging and displaying complex data structures in a readable format.

Example:

        <pre>{{ {name: 'John', age: 30} | json }}</pre>
    

Output:

        {
            "name": "John",
            "age": 30
        }
    

Consider json as a translator who takes a complex language (JavaScript object) and converts it into a simpler, universal language (JSON string) that everyone can understand.

5. limitTo

The limitTo filter limits an array or string to a specified number of elements or characters. This filter is useful for pagination and displaying a subset of data.

Example:

        <p>{{ 'Hello, World!' | limitTo:5 }}</p>
    

Output:

        Hello
    

Think of limitTo as a bouncer at a nightclub who only allows a certain number of people (elements) to enter, ensuring the venue doesn't get overcrowded.

6. lowercase

The lowercase filter converts a string to lowercase. This filter is useful for normalizing text and ensuring consistency in your application.

Example:

        <p>{{ 'Hello, World!' | lowercase }}</p>
    

Output:

        hello, world!
    

Imagine lowercase as a librarian who insists that all books (strings) be shelved in lowercase letters, ensuring a uniform appearance.

7. uppercase

The uppercase filter converts a string to uppercase. This filter is useful for emphasizing text and ensuring consistency in your application.

Example:

        <p>{{ 'Hello, World!' | uppercase }}</p>
    

Output:

        HELLO, WORLD!
    

Think of uppercase as a teacher who insists that all students (strings) shout their answers in uppercase letters, ensuring everyone can hear them clearly.