Key takeaways:
Filters are functions used to transform or format data within Angular templates, allowing developers to modify the output without altering the original data source.
Angular offers built-in filters like
uppercase,lowercase,currency,date, andnumber, which are applied using the pipe (|) symbol in HTML templates to handle common data formatting tasks.Developers can create custom filters using Angular’s
@Pipedecorator, enabling data transformation based on specific project requirements.Angular allows chaining multiple filters for complex data transformations, where the output of one filter can be used as the input for another.
Filters efficiently modify data presentation in Angular apps, making it easy to format, sort, or filter data dynamically within templates.
Angular provides developers with powerful tools and features to create dynamic web applications. Among these features, filters stand out as a handy tool.
Filters serve as functions that manipulate the output of an expression within an HTML template. Their primary purpose is to transform data before displaying it to the user. Filters can be applied to various data types, including strings, numbers, arrays, etc. They enable developers to format, sort, filter, or perform custom operations on data without modifying the original data source. First, let’s look at some key takeaways:
To apply a filter in Angular, we use the pipe symbol (|) followed by the filter name within an HTML template expression. For example, if we want to convert a string to uppercase, we can achieve this by utilizing the uppercase filter as shown below:
{{ 'Hello' | uppercase }}
Here, Hello represents the string to modify. Applying the uppercase filter will transform the string to all uppercase characters. Angular provides a set of built-in filters that cover common data transformations. Let’s explore some of the most commonly used built-in filters:
lowercase: Converts a string to all lowercase characters.
{{ 'Hello' | lowercase }}
uppercase: Converts a string to all uppercase characters.
{{ 'Hello' | uppercase }}
currency: Formats a number as a currency using the specified currency symbol.
{{ price | currency: 'USD' }}
date: Formats a date object into a string based on the provided format.
{{ currentDate | date: 'dd/MM/yyyy' }}
number: Format a number as a string using a decimal and a thousand separator.
{{ myNumber | number }}
These are just a few examples of the built-in filters available in Angular. Each filter has unique functionality, allowing for powerful data transformations within HTML templates.
In addition to the built-in filters, Angular enables developers to create custom filters to address specific requirements. Custom filters are defined as functions within Angular modules and can be used similarly to the built-in ones. Inside the Angular project folder, navigate to the src/app directory. Create a new file called custom-filter.ts. This file will contain the logic for the custom filter.
In the custom-filter.ts file, start by importing the required dependencies:
import { Pipe, PipeTransform } from '@angular/core';
Next, create a new class and decorate it with @Pipe to define it as a custom filter:
@Pipe({name: 'customFilter'})export class CustomFilter implements PipeTransform {transform(value: any, arg1: any, arg2: any): any {// Implement your custom filter logic here}}
The transform method is where the actual filtering logic goes. It takes the value to be filtered, and we may need any additional arguments (arg1, arg2, etc.).
Implement the custom filtering logic in the transform method based on the requirements. We can perform any data manipulation or formatting here. Once the transformation is complete, return the filtered result. For example, let’s implement a simple filter that appends a prefix to the input value:
transform(value: any, prefix: string): any {return prefix + value;}
To use the custom filter in the Angular templates, we need to import and declare it. Open the app.module.ts file located in the src/app directory. Import the custom filter by adding the following line at the top:
import { CustomFilter } from './custom-filter';
Inside the @NgModule decorator, add CustomFilter to the declarations array:
@NgModule({declarations: [CustomFilter],// ...})
Now, we can apply the custom filter in any Angular template. For example, open the app.component.html file located in the src/app directory: use the | (pipe) symbol to apply the filter and provide any necessary arguments:
<p>{{ 'Hello' | customFilter:'Prefix: ' }}</p>
In this example, the filter will prepend the text "Prefix: " to the string "Hello" and display the result.
Angular allows for the chaining of multiple filters to achieve complex data transformations. Filters are applied sequentially from left to right, where the output of one filter becomes the input for the next filter. This chaining mechanism enables developers to combine and apply various filters to achieve the desired result. For example:
{{ 'Educative' | uppercase | customFilter:'Hello ' }}
In this case, the string is first converted to uppercase, and then the 'Hello' prefix is added.
Now you can run your application by running the following command in the terminal:
ng serve
Following is an example application using Bootstrap in angular:
<h1>Filters in Angular</h1>
<p>Uppercase Filter: {{ 'Hello' | uppercase }}</p>
<p>Lowercase Filter: {{ 'Hello' | lowercase }}</p>
<p>Currency Filter: {{ price | currency: 'USD' }}</p>
<p>Date Filter: {{ currentDate | date: 'dd/MM/yyyy' }}</p>
<p>Number Filter: {{ myNumber | number }}</p>
<p>Custom Filter: {{ 'Hello' | customFilter: 'Prefix: ' }}</p>
<p>Chained Filters: {{ 'Educative' | uppercase | customFilter:'Hello ' }}</p>Filters in Angular provide developers with a flexible and efficient means of modifying data presentation within HTML templates. They empower developers to transform, format, and filter data without making changes to the original data source.
Haven’t found what you were looking for? Contact Us
Free Resources