Angular impure pipe

Suggested Videos
Part 46 - Javascript objects and reference variables | Text | Slides
Part 47 - Filter pipe in angular | Text | Slides
Part 48 - Angular pure pipe | Text | Slides

In this video we will discuss impure pipes and their performance implications.

This is continuation to Part 48, please watch Part 48 from Angular CRUD tutorial before proceeding.


In our previous 2 videos we implemented a pure pipe to filter employee data. A pure pipe is only executed when a pure change to the input value is detected.


Pure pipes are fast, but using them for filtering data is not a good idea because, the filtering may not work as expected if the source data is updated without a change to the object reference.

One way to make this work is by making the pipe impure. Impure pipes can significantly impact the performance of the application as they run on every change detection cycle. To make a pipe impure, set it's pure property to false.

@Pipe({
    name: 'employeeFilter',
    pure: false
})
export class EmployeeFilterPipe implements PipeTransform {

You have to think very carefully when you make a pipe impure. This is because an impure pipe is processed on every change, even when the source data does not change. They run unnecessarily when not required. 

If you have an array with thousands of objects and each object in turn has dozens of properties. Now if we use an impure pipe to filter or sort this array and for some reason on the same page if we are also listening to the mosue move or keystroke event, then the pipe is unnecessarily executed for every mouse move or keystroke which can significantly degrade the performance of the application.

This is the reason, Angular team recommends not to use pipes to filter and sort data. Angular recommends to move the filtering and sorting logic into the component itself. We will discuss how to implement filtering in a component in our next video.