Understanding Pure and Impure Pipes in Angular

Photo by Tyler Lastovich on Unsplash

A pipe is a simpler function that you can use in template expressions to accept input value and returns a transformed value. They can help in solving simple and complex tasks and can help in performance gains if used correctly. You can check the performance of the app with and without pipe with the performance monitor tool provided in chrome.

For creating a pipe, you will need to import the Pipe decorator and PipeTransform from @angular/core . The pipe decorator allows you to give a name to your pipe and set the pure flag as true or false.PipeTransform provides the transform method for accessing the pipe’s value and arguments.

There are 2 different types of pipe-:

1. Pure
2. Impure

Pure pipes

A pure pipe must be a pure function (refer to this to know about pure function), which processes input and returns a value without side effects. Given some input, the pure function should return the same deterministic output. In much simpler words, when the same input is given you can expect the same results. To achieve this, the pipe should not rely on any internal state.

By default, pipes are defined as pure so that the angular executes the pipe only when it detects a pure change to the input value. That is, the transform() method is invoked only when its input’s argument changes. And pure changes are either a change in primitive input value like string, number, or a changed object reference like an array, date. For example,

app. component.ts

square. pipe.ts

Output screen

We saw above that whenever the value to the input tag changes, angular runs the pipe and returns the square of the number. Hence, whenever the pure change is detected, angular runs the pipe. Now let’s see whether angular detects changes within composite objects such as insertion of an element within an existing array and see whether it runs the pipe or not.

app.component.ts

product.ts

custom-change.pipe.ts

Output screen

We saw above that though the product array was updating as visible in the console, the array was not updating on the screen though the condition was fulfilled for the newly added item. Hence, we come to a conclusion that with pure pipes, angular ignores the changes within the composite objects. The reason is, checking a primitive value or object reference is much faster than performing deep checking within objects or arrays. Angular can quickly determine if it can skip the execution of the pipe and updating the view.

There can be other solutions for the above issue with pure pipe like using a new array but let's see how it can be achieved with impure pipes.

Impure pipes

As discussed above, by default pipe is pure, and to make it impure there is a flag named pure in pipe metadata that needs to be assigned as false. Impure pipe irrespective of the pure pipe can rely on internal state.

custom-change.pipe.ts

Output screen

So, we saw above how changes were visible in the div with impure pipes. The reason is angular executes an impure pipe on each change detection cycle, even if the arguments have not changed. But it's recommended to be careful while using impure pipes. If not, it may affect the overall app performance when working with a large amount of data.

Hope this blog helped you in understanding pure and impure pipes.

Thank you ✨✨

Happy coding !!