7 Filters in AngularJS

Key Concepts

Filters in AngularJS are used to format data before displaying it in the view. They can be applied to expressions, directives, and controllers to modify the output. AngularJS provides several built-in filters, and you can also create custom filters to meet specific needs.

1. currency

The currency filter formats a number as a currency. It adds the appropriate currency symbol and decimal places based on the locale. This filter is useful for displaying monetary values in a consistent format.

Example:

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

Output:

        $1,234.56
    

Imagine currency as a cashier who takes raw numbers and converts them into neatly formatted currency values, complete with symbols and decimal points.

2. date

The date filter formats a date object or a timestamp into a human-readable date string. You can specify the format using various tokens. This filter is essential for displaying dates in a user-friendly way.

Example:

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

Output:

        Oct 1, 2023-12:00:00 PM
    

Think of date as a calendar that takes raw date data and transforms it into a readable format, making it easier for users to understand.

3. uppercase

The uppercase filter converts a string to all uppercase letters. This filter is useful for ensuring consistency in text formatting, especially for titles or headings.

Example:

        <p>{{ 'hello world' | uppercase }}</p>
    

Output:

        HELLO WORLD
    

Consider uppercase as a text editor that automatically capitalizes all letters, ensuring that your text stands out and is easy to read.

4. lowercase

The lowercase filter converts a string to all lowercase letters. This filter is useful for standardizing text input, especially in forms or search fields.

Example:

        <p>{{ 'HELLO WORLD' | lowercase }}</p>
    

Output:

        hello world
    

Think of lowercase as a text editor that automatically converts all letters to lowercase, ensuring consistency in your text.

5. number

The number filter formats a number with a specified number of decimal places and adds commas as thousand separators. This filter is useful for displaying numerical data in a readable format.

Example:

        <p>{{ 1234567.89 | number:2 }}</p>
    

Output:

        1,234,567.89
    

Imagine number as a formatter that takes raw numbers and adds commas and decimal places, making them easier to read and understand.

6. 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:

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

Output:

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

Think of json as a translator that converts complex data structures into a simple, readable format, making it easier to inspect and understand.

7. limitTo

The limitTo filter limits an array or string to a specified number of elements or characters. This filter is useful for pagination and truncating long strings.

Example:

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

Output:

        Hello
    

Consider limitTo as a slicer that cuts arrays or strings to a specified length, making it easier to manage and display large datasets.