Improve Angular Performance with Custom Pipes

Angular pipes are like magic wands for your data. They transform raw information into something beautiful and useful right on your webpage. While they’re great for simple tasks like formatting numbers, currencies or dates, they can do much more.

This article will show you how to use pipes in unexpected ways to make your Angular apps even better.

Basic Use Cases: Sorting and Filtering

1. Sorting Data with Pipes

One of the more common uses of pipes is to sort data. Consider a scenario where your data isn’t ordered alphabetically. A custom sort pipe can be created to address this issue.

Here’s a simple implementation of a sort pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {
  transform(value: any[], field: string): any[] {
    if (!value || !field) return value;
    return value.sort((a, b) => a[field].localeCompare(b[field]));
  }
}

By applying this sort pipe in your template, you can effortlessly sort your data:

<ul>
  <li *ngFor="let item of items | sort:'name'">{{ item.name }}</li>
</ul>

This simple yet effective pipe will arrange your data in alphabetical order based on the specified field.

2. Filtering Data with Pipes

Another common use case for pipes is filtering data based on a search text or criteria. Let’s create a search pipe to filter our data:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(value: any[], searchText: string): any[] {
    if (!value || !searchText) return value;
    return value.filter(item =>
      item.name.toLowerCase().includes(searchText.toLowerCase())
    );
  }
}

In the template, you can use this search pipe as follows:

<input type="text" [(ngModel)]="searchText" placeholder="Search...">
<ul>
  <li *ngFor="let item of items | search:searchText">{{ item.name }}</li>
</ul>

This will dynamically filter the displayed items based on the input search text.

Advanced Use Case: Improving Performance

Pipes can also be used to address performance issues, particularly when dealing with functions inside templates. When a function is called within a template, it can lead to performance degradation because the function might be invoked on every change detection cycle. This can be problematic, especially when the function involves complex logic or HTTP calls.

Consider the following scenario where a function is used in a template:

<li *ngFor="let item of getData()">{{ item.name }}</li>

If getData() is called repeatedly, especially on every keystroke or UI interaction, it can lead to significant performance issues.

3. Using Pipes to Enhance Performance

To mitigate this, you can create a pipe to encapsulate the logic and use it instead of a function call within the template:

import { Pipe, PipeTransform } from '@angular/core';
import { StateService } from './state.service';

@Pipe({
  name: 'stateData'
})
export class StateDataPipe implements PipeTransform {
  constructor(private stateService: StateService) {}

  transform(value: any, args?: any): any {
    return this.stateService.getData();
  }
}

In your component template, replace the function call with the pipe:

<ul>
  <li *ngFor="let item of items | stateData">{{ item.name }}</li>
</ul>

Why Use Pipes for Performance?

Pipes are pure by default, meaning they are only called when the input data changes, not on every change detection cycle. This behavior reduces unnecessary function calls and optimizes application performance.

Conclusion

Angular pipes offer more than just basic data transformation capabilities. By leveraging custom pipes for sorting, filtering, and enhancing performance, you can write cleaner, more efficient Angular applications.

Next time you face a performance bottleneck or need a reusable data transformation, consider creating a custom pipe. With a bit of creativity, the possibilities are endless!