Angular Challenges #8, #9, #10 - Pipes
- Angular
- Angular CLI version 16.2.0.
- Karma Firefox Launcher
The goal of this series of 3 pipe challenges is to master PIPES in Angular.
Pure pipe are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipe are memoized. They won't be recalculated every change detection cycle if the inputs have not changed.
In this first exercice, you add calling a simple function inside your template. The goal is to convert it to a pipe.
- must be strongly typed
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. 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.
In this third exercice, you want to access utils functions. Currently we 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.
- Is {pure: true} not necessary ?
ng generate pipe [pipeName] --skip-importis the command to make a pipe if the app component is not a module.- Don't use hyphens in the name of pipes.
- Calling a function inside a template can have a significant impact on performance as the function will be recomputed every time change detection is executed.
- Memo functions are not as flexible as pipes.
- Utilities pipe is more of an advanced typescript exercise.
- The utilities pipe's approach is better than the wrapFn pipe because type safety is maintained throughout the whole process?
- A key to making anything more typesafe is using the extends keyword.
- A more specific type extends from a generic type -> similar to overloading -> need a generic base case as a failsafe
- I was able to complete the first two pipes but I eventually gave up on the third pipe and looked at the solutions posted.
- This Solution reuses wrapFn logic. However, it is a little harder to understand and has intermediate steps versus Thomas' solution. I find using just super() in the main class a little weird.
- Thomas' solution is actually small and relies on some keywords I haven't really needed to use.
- Parameters is a typescript utility type.
- He added
as constto PersonUtils to allow use of...args. Without it, I think the compiler will complain because the compiler won't know how many arguments are allowed. See Stack Overflow for more. - unknown is I don't know; any is I don't care.
- never is an empty set. unknown is a set with all possible values. any is not a set.
- 'never' prevents defaulting to a more permissible type in conditional logic. never will cause errors to be thrown if the value doesn't match the inferred type of First.
- Some languages treat null as though it is a subtype of every other type, in which case it is effectively a bottom type. (This includes TypeScript if it is not configured with strict checking options.)
- File structure is a mess. I opted to comment out different solutions versus making multiple components and importing them all in another component.
- Could have a separate pipes folder, etc.
- Angular Docs - custom pipe
- Stack Overflow - convert a function into a pipe
- Blog - angular 14 standalone components
- Stack Overflow - how do i call an angular 2 pipe with multiple arguments
- Medium - passing a callback function into a custom angular pipe
- Medium - how to unit test a custom angular pipe
- Bobby Hadz - typescript spread argument must either have tuple type
- YouTube - Dynamic function arguments with GENERICS - Advanced TypeScript
- Stack Overflow - as const use cases
- Stack Overflow - unknown vs any
- Stack Overflow - keyof typeof
- LogRocket Blog - when to use never and unknown