From dcf80b54db679313a4ee6627b74dc98ba4418fb0 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 09:06:25 +0100 Subject: [PATCH] docs(pipes): update pipe challenge texts --- .../challenges/angular/10-pipe-utility.md | 19 +++++++++++++++---- .../docs/challenges/angular/8-pipe-pure.md | 19 +++++++++++++++---- .../docs/challenges/angular/9-pipe-wrapFn.md | 19 +++++++++++++++---- 3 files changed, 45 insertions(+), 12 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md index f8688dd..6e13733 100644 --- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md @@ -8,14 +8,25 @@ sidebar: order: 202 --- -The goal of this series of 3 pipe challenges is to master **pipe** in Angular. +This is the third of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. -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. +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 mwhen the value changes. +A **impure** pipe is called for every change detection cycle no matter whether the value changes. +::: + +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). ## Information: -In this third exercice, 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. +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 +- Must be strongly typed diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index 58620cb..6e5b11a 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -9,14 +9,25 @@ sidebar: order: 3 --- -The goal of this series of 3 pipe challenges is to master **pipe** in Angular. +This is the first of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. -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. +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 mwhen the value changes. +A **impure** pipe is called for every change detection cycle no matter whether the value changes. +::: + +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). ## Information -In this first exercice, 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 diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md index a50aa09..9c97bcd 100644 --- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md @@ -9,15 +9,26 @@ sidebar: order: 103 --- -The goal of this series of 3 pipe challenges is to master **pipe** in Angular. +This is the second of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. -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. +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 mwhen the value changes. +A **impure** pipe is called for every change detection cycle no matter whether the value changes. +::: + +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). ## Information: -In this second exercice, 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. +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