{"id":21307777,"url":"https://github.com/jdegand/angular-pipes","last_synced_at":"2026-05-18T08:33:25.809Z","repository":{"id":192704963,"uuid":"686748536","full_name":"jdegand/angular-pipes","owner":"jdegand","description":"Angular Challenges #8, #9, #10 Pipes","archived":false,"fork":false,"pushed_at":"2023-09-05T00:32:54.000Z","size":144,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T09:13:33.903Z","etag":null,"topics":["angular","angular-challenges","pipes"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdegand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-03T20:10:36.000Z","updated_at":"2023-09-13T01:13:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"f8666549-96b4-45df-a4b0-973cf2f94488","html_url":"https://github.com/jdegand/angular-pipes","commit_stats":null,"previous_names":["jdegand/angular-pipes"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-pipes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-pipes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-pipes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fangular-pipes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/angular-pipes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243785089,"owners_count":20347409,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-challenges","pipes"],"created_at":"2024-11-21T16:34:07.792Z","updated_at":"2026-05-18T08:33:20.784Z","avatar_url":"https://github.com/jdegand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Pipes\n\n[Angular Challenges](https://github.com/tomalaforge/angular-challenges) #8, #9, #10 - Pipes\n\n## Screenshots\n\n![](screenshots/angular-pipes-easy.png \"Simple Pure Pipe\")\n\n***\n\n![](screenshots/angular-pipes-intermediate.png \"WrapFn Pipe\")\n\n***\n\n![](screenshots/angular-pipes-hard.png \"Utilities Pipe\")\n\n***\n\n## Built With\n\n- [Angular](https://angular.io)\n- [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.\n- [Karma Firefox Launcher](https://www.npmjs.com/package/karma-firefox-launcher)\n\n## Directions\n\nThe goal of this series of 3 pipe challenges is to master PIPES in Angular.\n\nPure 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.\n\n***\n\n### Simple Pure Pipe\n\n#### Information:\n\nIn this first exercice, you add calling a simple function inside your template. The goal is to convert it to a pipe.\n\n#### Constraints:\n\n- must be strongly typed\n\n***\n\n### WrapFn Pipe\n\n#### Information\n\nIn 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.\n\n***\n\n### Utilities pipe\n\n#### Information\n\nIn 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.\n\n***\n\n## Thoughts\n \n- Is {pure: true} not necessary ?\n- `ng generate pipe [pipeName] --skip-import` is the command to make a pipe if the app component is not a module.  \n- Don't use hyphens in the name of pipes.  \n- 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. \n- Memo functions are not as flexible as pipes. \n- Utilities pipe is more of an advanced typescript exercise. \n- The utilities pipe's approach is better than the wrapFn pipe because type safety is maintained throughout the whole process? \n- A key to making anything more typesafe is using the extends keyword.\n- A more specific type extends from a generic type -\u003e similar to overloading -\u003e need a generic base case as a failsafe\n- I was able to complete the first two pipes but I eventually gave up on the third pipe and looked at the solutions posted.  \n- [This Solution](https://github.com/tomalaforge/angular-challenges/pull/20/files) 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.\n- Thomas' solution is actually small and relies on some keywords I haven't really needed to use.  \n- Parameters is a typescript utility type.  \n- He added `as const` to 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](https://stackoverflow.com/questions/66993264/what-does-the-as-const-mean-in-typescript-and-what-is-its-use-case) for more.  \n- unknown is I don't know; any is I don't care.\n- never is an empty set. unknown is a set with all possible values.  any is not a set.\n- '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.  \n- 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.)\n\n## Continued Development\n\n- File structure is a mess.  I opted to comment out different solutions versus making multiple components and importing them all in another component. \n- Could have a separate pipes folder, etc.\n\n## Useful Resources\n\n- [Angular Docs](https://angular.io/guide/pipes-custom-data-trans) - custom pipe\n- [Stack Overflow](https://stackoverflow.com/questions/56264992/how-to-convert-a-function-into-a-pipe-function) - convert a function into a pipe\n- [Blog](https://kgajera.com/blog/angular-14-standalone-components/) - angular 14 standalone components\n- [Stack Overflow](https://stackoverflow.com/questions/36816788/how-do-i-call-an-angular-2-pipe-with-multiple-arguments) - how do i call an angular 2 pipe with multiple arguments\n- [Medium](https://medium.com/@bilalhaidar/passing-a-callback-function-into-a-custom-angular-pipe-e04e920ff355) - passing a callback function into a custom angular pipe\n- [Medium](https://marklowg.medium.com/how-to-unit-test-a-custom-angular-pipe-744f20a97f5) - how to unit test a custom angular pipe\n- [Bobby Hadz](https://bobbyhadz.com/blog/typescript-spread-argument-must-either-have-tuple-type) - typescript spread argument must either have tuple type\n- [YouTube](https://www.youtube.com/watch?v=YE_3WwX-Dl8) - Dynamic function arguments with GENERICS - Advanced TypeScript\n- [Stack Overflow](https://stackoverflow.com/questions/66993264/what-does-the-as-const-mean-in-typescript-and-what-is-its-use-case) - as const use cases\n- [Stack Overflow](https://stackoverflow.com/questions/51439843/unknown-vs-any) - unknown vs any\n- [Stack Overflow](https://stackoverflow.com/questions/55377365/what-does-keyof-typeof-mean-in-typescript) - keyof typeof\n- [LogRocket Blog](https://blog.logrocket.com/when-to-use-never-unknown-typescript/) - when to use never and unknown\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fangular-pipes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fangular-pipes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fangular-pipes/lists"}