{"id":29259557,"url":"https://github.com/ngx-rock/memoize-pipe","last_synced_at":"2026-01-25T03:28:08.849Z","repository":{"id":235439212,"uuid":"790607150","full_name":"ngx-rock/memoize-pipe","owner":"ngx-rock","description":"Memoizing Angular function components in a template","archived":false,"fork":false,"pushed_at":"2025-06-24T19:19:42.000Z","size":916,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-23T22:23:32.246Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@ngx-rock/memoize-pipe","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngx-rock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-23T07:36:32.000Z","updated_at":"2025-07-24T14:37:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"ad279940-62f5-43ee-b6f1-360ecdb6d268","html_url":"https://github.com/ngx-rock/memoize-pipe","commit_stats":null,"previous_names":["ngx-rock/memoize-pipe"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ngx-rock/memoize-pipe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-rock%2Fmemoize-pipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-rock%2Fmemoize-pipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-rock%2Fmemoize-pipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-rock%2Fmemoize-pipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngx-rock","download_url":"https://codeload.github.com/ngx-rock/memoize-pipe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngx-rock%2Fmemoize-pipe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28742975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T02:46:29.005Z","status":"ssl_error","status_checked_at":"2026-01-25T02:44:29.968Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-07-04T07:01:06.741Z","updated_at":"2026-01-25T03:28:08.833Z","avatar_url":"https://github.com/ngx-rock.png","language":"JavaScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Pipes"],"readme":"# Memoize Pipe\n\n[![npm version](https://badge.fury.io/js/@ngx-rock%2Fmemoize-pipe.svg)](https://badge.fury.io/js/@ngx-rock%2Fmemoize-pipe) [![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/ngx-rock/memoize-pipe/blob/main/LICENSE)\n\n*Memoize Pipe* – a universal `pipe` for memoizing computations in Angular templates.\n\n## Description\n\nIn Angular, functions in templates are called on every change detection cycle. \nTo minimize redundant computations, it's recommended to use the `pipe` mechanism. \nHowever, creating separate pipes for one-time use seems excessive.\n\n**Memoize Pipe** solves this problem by providing a universal pipe that automatically caches function results based on their arguments.\n\n### What is memoization?\n\nMemoization is an optimization technique where the results of expensive function calls are cached. When the function is called again with the same arguments, the cached result is returned, significantly improving performance.\n\n## Usage\n\n### Basic Example\n\nTransform a regular function call into an optimized one using the `fn` pipe:\n\n**Before:**\n```typescript\n@Component({\n  selector: 'app-example',\n  template: `\n    \u003cdiv\u003e{{ formatUserData(user, preferences) }}\u003c/div\u003e\n    \u003cdiv\u003e{{ calculateTotal(items) }}\u003c/div\u003e\n  `,\n})\nexport class AppComponent {\n  formatUserData(user: User, preferences: UserPreferences): string {\n    // Expensive computation\n    return `${user.name} (${preferences.theme})`;\n  }\n\n  calculateTotal(items: CartItem[]): number {\n    // Complex calculation logic\n    return items.reduce((sum, item) =\u003e sum + item.price * item.quantity, 0);\n  }\n}\n```\n\n**After:**\n```typescript\n@Component({\n  selector: 'app-example',\n  template: `\n    \u003cdiv\u003e{{ formatUserData | fn : user : preferences }}\u003c/div\u003e\n    \u003cdiv\u003e{{ calculateTotal | fn : items }}\u003c/div\u003e\n  `,\n})\nexport class AppComponent {\n  formatUserData(user: User, preferences: UserPreferences): string {\n    // This function will now only be called when arguments change\n    return `${user.name} (${preferences.theme})`;\n  }\n\n  calculateTotal(items: CartItem[]): number {\n    // Recalculation only when the items array changes\n    return items.reduce((sum, item) =\u003e sum + item.price * item.quantity, 0);\n  }\n}\n```\n\n### Preserving Context\n\nFor functions that use `this` (component properties), convert them to arrow functions:\n\n```typescript\n@Component({\n  selector: 'app-context',\n  template: `\n    \u003cdiv\u003e{{ processData | fn : inputData }}\u003c/div\u003e\n  `,\n})\nexport class AppComponent {\n  private multiplier = 10;\n\n  // Arrow function preserves the 'this' context\n  processData = (data: number[]): number[] =\u003e {\n    return data.map(item =\u003e item * this.multiplier);\n  }\n}\n```\n\n## Installation\n\n### npm\n```bash\nnpm install @ngx-rock/memoize-pipe\n```\n\n### pnpm\n```bash\npnpm add @ngx-rock/memoize-pipe\n```\n\n### yarn\n```bash\nyarn add @ngx-rock/memoize-pipe\n```\n\n### Adding to Your Application\n\n**Standalone components (recommended):**\n```typescript\nimport { FnPipe } from \"@ngx-rock/memoize-pipe\";\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [FnPipe, CommonModule],\n  template: `{{ myFunction | fn : arg1 : arg2 }}`\n})\nexport class ExampleComponent {}\n```\n\n**Module-based approach:**\n```typescript\nimport { FnPipe } from \"@ngx-rock/memoize-pipe\";\n\n@NgModule({\n  imports: [FnPipe],\n  // ...\n})\nexport class AppModule {}\n```\n\n## Benefits\n\n✅ **Easy to use** - minimal code changes required  \n✅ **Type safety** - full TypeScript support  \n✅ **Performance** - automatic memoization  \n✅ **Universal** - works with any functions  \n✅ **Standalone** - supports standalone components  \n\n## Important Notes\n\n⚠️ **Pure functions**: For memoization to work correctly, functions should be pure (return the same result for the same arguments)\n\n⚠️ **Reference types**: Memoization works based on reference comparison. For objects and arrays, ensure you create new instances when data changes\n\n⚠️ **Memory**: Function results are cached for the component's lifetime. For components with many unique calls, monitor memory consumption\n\n## Compatibility\n\n| memoize-pipe | Angular   | TypeScript |\n|--------------|-----------|------------|\n| 0.x.x        | 13.x.x    | ~4.7.x     |\n| 1.x.x        | 14.x.x    | ~4.8.x     |\n| 2.x.x        | 17.x.x    | ~5.2.x     |\n| 18.x.x       | 18.x.x    | ~5.4.x     |\n| 19.x.x       | 19.x.x    | ~5.6.x     |\n| 20.x.x       | 20.x.x    | ~5.8.x     |\n| 21.x.x       | 21.x.x    | ~5.9.x     |\n\n## Frequently Asked Questions\n\n**Q: When should I use the fn pipe?**  \nA: Use it for expensive computations in templates, especially for filtering, sorting, and data formatting.\n\n**Q: How does caching work?**  \nA: Results are cached based on input arguments. When any argument changes, the function is executed again.\n\n**Q: Can I use it with async functions?**  \nA: No, fn pipe is designed only for synchronous functions. For async operations, use the async pipe combined with Observable.\n\n---\n\n**[English](README.md)** | [Русский](README_RU.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-rock%2Fmemoize-pipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngx-rock%2Fmemoize-pipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngx-rock%2Fmemoize-pipe/lists"}