Merge pull request tomalaforge#591 from svenson95/docs-pipes-changes

Extend docs text for pipe challenges & refactor pipe-easy component

Author: tomalaforge

docs/src/content/docs/challenges/angular/10-pipe-utility.md

@@ -8,14 +8,27 @@ sidebar:
  order: 202
 ---
 
-The goal of this series of 3 pipe challenges is to master **pipe** in Angular.
+## Information
 
-Pure pipes are a very useful way to transform data from 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.
+This is the third of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular.
 
-## Information:
+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.
 
-In this third 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.
+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 improving rendering performance.
 
-## Constraints:
+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.
 
-- must be strongly typed
+:::note
+A **pure** pipe is only called when the value changes.\
+A **impure** pipe is called every change detection cycle.
+:::
+
+There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes).
+
+## 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

docs/src/content/docs/challenges/angular/8-pipe-pure.md

@@ -9,14 +9,27 @@ sidebar:
  order: 3
 ---
 
-The goal of this series of 3 pipe challenges is to master **pipe** in Angular.
+## Information
 
-Pure pipes are a very useful way to transform data from 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.
+This is the first of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular.
 
-## Information
+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 improving 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.
+
+:::note
+A **pure** pipe is only called when the value changes.\
+A **impure** pipe is called every change detection cycle.
+:::
+
+There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes).
+
+## Statement
 
-In this first exercise, you call a simple function inside your template. The goal is to convert it to a pipe.
+In this exercise, you need to refactor a transform function inside a component, which is called inside your template. The goal is to convert this function to a pipe.
 
 ## Constraints
 
-- must be strongly typed
+- Must be strongly typed

docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md

@@ -9,15 +9,28 @@ sidebar:
  order: 103
 ---
 
-The goal of this series of 3 pipe challenges is to master **pipe** in Angular.
+## Information
 
-Pure pipes are a very useful way to transform data from 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.
+This is the second of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular.
 
-## Information:
+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.
 
-In this second exercise, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome.
+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 improving 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.
+
+:::note
+A **pure** pipe is only called when the value changes.\
+A **impure** pipe is called every change detection cycle.
+:::
+
+There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes).
+
+## Statement
+
+In this exercise, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome.
 The goal is to create a `wrapFn` pipe to wrap your callback function though a pipe. Your function MUST remain inside your component. **`WrapFn` must be highly reusable.**
 
 ## Constraints:
 
-- must be strongly typed
+- Must be strongly typed