Skip to content
angular challenges logo Angular Challenges

๐Ÿ”ด Utility Wrapper Pipe

Challenge #10

Created by Thomas Laforge

Information

This is the third of three @Pipe() challenges. The goal of this series is to master pipes in Angular.

Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So, they wonโ€™t be recalculated every change detection cycle if their inputs havenโ€™t changed.

Pipes are designed to be efficient and optimized for performance. They use change detection mechanisms to only recalculate the value if the input changes, to minimize unnecessary calculations and improve rendering performance.

By default, a pipe is pure. You should be aware that setting pure to false is prone to be inefficient, because it increases the amount of rerenders.

There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation here.

Statement

In this exercise, you want to access utils functions. Currently, you cannot access them directly from your template. The goal is to create a specific pipe for this utils file, where you will need to pass the name of the function you want to call and the needed arguments.

Constraints

  • Must be strongly typed

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • tomalaforge
  • tomer953
  • svenson95
  • LMFinney