Nerd For Tech
Published in

Nerd For Tech

How pure and impure pipes work in Angular Ivy

Understanding how pipes work under the hood by looking at their implementation details in Ivy

Photo by Samuel Sianipar on Unsplash

Setting things up

Create new Angular 9 project

Create a custom pure and an impure pipe

Create custom pure and impure pipe
MyCustomPurePipe code
MyCustomImpurePipe code
AppComponent code

Exploring Pipes

AppComponent template code
AppComponent creation phase code
AppComponent change detection phase


  • In Ivy, every pipe has its own instance, be it a pure or impure pipe. Whereas in View Engine, pure pipe has a shared instance. For example, in Ivy, if I use myCustomPurePipe in two places in a template, then, two instances of MyCustomPurePipe are created.
  • In a component which uses Default change detection strategy, when change detection happens, if the pipe is impure, then the transform method will be called. If the pipe is pure, whether there are any changes in input parameters in the transform method from the last call, then transform method will be called. Otherwise the pipe will return the cached value from last transform call.
  • When using impure pipe async, you should use it together with OnPush change detection to avoid unnecessary calls to transform on every change detection.



NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store