Optimizing Performance with Pure Pipes

Snippet

Optimizing Performance with Pure Pipes

By default, Angular pipes are 'pure'. This means the transform method is only called if the input arguments change. This prevents expensive calculations from running on every change detection cycle, significantly improving performance.

snippet.js
javascript
@Pipe({
  name: 'expensiveFilter',
  pure: true
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], term: string): any[] {
    return items.filter(item => item.name.includes(term));
  }
}

angular

Breakdown

pure: true

Tells Angular to only re-run the pipe if the identity of 'items' or 'term' changes.

transform(items: any[], term: string)

The core logic that filters the array based on the provided search term.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Optimizing Performance with Pure Pipes

Related