Return to site

ANGULAR INTERVIEW QUESTION: What is the difference between pure and impure pipes?

ยท ngInterview,fullstack

๐Ÿ’ก ๐๐”๐‘๐„ ๐๐ˆ๐๐„๐’

Pure pipes are stateless, which means that there is no handling of a state between two calls, and there's no collateral effect.

Hence, a pure pipe is called only when Angular detects a change in the value parsed to the pipe.


<โ„Ž1>{{ ๐‘ก๐‘–๐‘ก๐‘™๐‘’ | ๐‘ข๐‘๐‘๐‘’๐‘Ÿ๐‘๐‘Ž๐‘ ๐‘’ }}

๐Ÿ’ก ๐ˆ๐Œ๐๐”๐‘๐„ ๐๐ˆ๐๐„๐’

On the other hand, Angular calls an impure pipe for each change detection cycle, no matter the value could change.

This can be useful in some cases when usual pipe changes can't be detected by Angular:

๐Ÿ‘‰ When we parse to the pipe an array or an object whom content did not change, while the instance is still the same.

๐Ÿ‘‰ When your pipe injects a service to access other values, but Angular has no way to detect the changes and does not update the view.

In such cases, using an impure pipe is meaningful, because your pipe is executed and your display updated.

But remember that impure pipes may be less efficient.

For example, when an array is parsed to an impure pipe to filter or sort the data, then the processing could be executed each time the change detection runs, even if the array did not change.

In that case, your pipe should try to detect this and send data from a cache.

๐‘บ๐’ ๐’‚ ๐’‘๐’–๐’“๐’† ๐’‘๐’Š๐’‘๐’† ๐’Š๐’” ๐’„๐’‚๐’๐’๐’†๐’… ๐’๐’๐’๐’š ๐’˜๐’‰๐’†๐’ ๐‘จ๐’๐’ˆ๐’–๐’๐’‚๐’“ ๐’…๐’†๐’•๐’†๐’„๐’•๐’” ๐’‚ ๐’„๐’‰๐’‚๐’๐’ˆ๐’† ๐’Š๐’ ๐’•๐’‰๐’† ๐’—๐’‚๐’๐’–๐’† ๐’‘๐’‚๐’“๐’”๐’†๐’… ๐’•๐’ ๐’•๐’‰๐’† ๐’‘๐’Š๐’‘๐’†.

๐‘จ๐’ ๐’Š๐’Ž๐’‘๐’–๐’“๐’† ๐’‘๐’Š๐’‘๐’† ๐’Š๐’” ๐’„๐’‚๐’๐’๐’†๐’… ๐’‡๐’๐’“ ๐’†๐’‚๐’„๐’‰ ๐’„๐’‰๐’‚๐’๐’ˆ๐’† ๐’…๐’†๐’•๐’†๐’„๐’•๐’Š๐’๐’ ๐’„๐’š๐’„๐’๐’†, ๐’˜๐’‰๐’‚๐’•๐’†๐’—๐’†๐’“ ๐’•๐’‰๐’† ๐’—๐’‚๐’๐’–๐’† ๐’„๐’‰๐’‚๐’๐’ˆ๐’†๐’”. ๐‘ฎ๐’†๐’๐’†๐’“๐’‚๐’๐’๐’š, ๐’˜๐’† ๐’‚๐’—๐’๐’Š๐’… ๐’–๐’”๐’Š๐’๐’ˆ ๐’Š๐’Ž๐’‘๐’–๐’“๐’† ๐’‘๐’Š๐’‘๐’†๐’” ๐’ƒ๐’†๐’„๐’‚๐’–๐’”๐’† ๐’๐’‡ ๐’•๐’‰๐’†๐’Š๐’“ ๐’„๐’‰๐’†๐’‚๐’‘ ๐’†๐’‡๐’‡๐’Š๐’„๐’Š๐’†๐’๐’„๐’š.