{"_id":"@asyncflowstate/angular","_rev":"4-93550dea20e301743c11ae1936719f54","name":"@asyncflowstate/angular","dist-tags":{"latest":"3.0.0"},"versions":{"2.0.0":{"name":"@asyncflowstate/angular","version":"2.0.0","keywords":["angular","angular17","signals","services","async","state","loading","error-handling","ux","typescript","data-fetching","state-management","rxjs"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","_id":"@asyncflowstate/angular@2.0.0","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"homepage":"https://github.com/devhimanshuu/asyncflowstate#readme","bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"dist":{"shasum":"f018ce493308a1a5f42a486fb60a6420124df8ef","tarball":"https://registry.npmjs.org/@asyncflowstate/angular/-/angular-2.0.0.tgz","fileCount":9,"integrity":"sha512-qirp8EDzoiQkAyjTkvn1/7iJMBp9uLKE9CqN5GS//3GSM8MAlg4jQML2zqxYbf4RkS50YdFagXEaP31nM8XA4Q==","signatures":[{"sig":"MEUCIQCPdUCo2o6DorRKh2n0Gg0Q9xnPFQVAL6ioYtk4oWwXmQIgb8WgNspDdwhgZv/4vVruAQzWoUZ8+/gpf0VZBarBFDw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":79660},"main":"./dist/index.js","_from":"file:asyncflowstate-angular-2.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"private":false,"scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"_resolved":"/tmp/26caf735c3a8f2903a3877c38027e110/asyncflowstate-angular-2.0.0.tgz","_integrity":"sha512-qirp8EDzoiQkAyjTkvn1/7iJMBp9uLKE9CqN5GS//3GSM8MAlg4jQML2zqxYbf4RkS50YdFagXEaP31nM8XA4Q==","repository":{"url":"git+https://github.com/devhimanshuu/asyncflowstate.git","type":"git","directory":"packages/angular"},"_npmVersion":"10.8.2","description":"Official Angular bindings for AsyncFlowState. Signal-based services (injectFlow, FlowService) for managing async loading, error, and success states with Angular 17+ signals.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@asyncflowstate/core":"2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"rxjs":"^7.8.2","zone.js":"^0.15.0","@angular/core":"^19.2.5"},"peerDependencies":{"rxjs":"^7.8.0","@angular/core":"^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular_2.0.0_1775766037846_0.5324357298583804","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@asyncflowstate/angular","version":"2.0.1","keywords":["angular","angular17","signals","services","async","state","loading","error-handling","ux","typescript","data-fetching","state-management","rxjs"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","_id":"@asyncflowstate/angular@2.0.1","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"homepage":"https://asyncflowstate-js.pages.dev/frameworks/angular","bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"dist":{"shasum":"8e9bfdc242c51cec8f43490a1d23a36c69341e3c","tarball":"https://registry.npmjs.org/@asyncflowstate/angular/-/angular-2.0.1.tgz","fileCount":9,"integrity":"sha512-5g8f9cU6cVoAU1MqimlAYC7V78mLZM77z+wmvHrpyClOTKNb+QRSpUVak3nXPtbFEFsgsLF0Kk9wK0INm9uHpw==","signatures":[{"sig":"MEUCIQD7YVIvPmzpUN0sIjXlSiob58sqqwaMU/qzu5ETfD9kbAIgC6emwZuqj4j6sLuhEq4mWf4+cS+BoCeN7wkisrG8nHE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":79960},"main":"./dist/index.js","_from":"file:asyncflowstate-angular-2.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"private":false,"scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"_resolved":"/tmp/01ccc2dcbd8d9c3c417374e65e695b33/asyncflowstate-angular-2.0.1.tgz","_integrity":"sha512-5g8f9cU6cVoAU1MqimlAYC7V78mLZM77z+wmvHrpyClOTKNb+QRSpUVak3nXPtbFEFsgsLF0Kk9wK0INm9uHpw==","repository":{"url":"git+https://github.com/devhimanshuu/asyncflowstate.git","type":"git","directory":"packages/angular"},"_npmVersion":"10.8.2","description":"Official Angular bindings for AsyncFlowState. Signal-based services (injectFlow, FlowService) for managing async loading, error, and success states with Angular 17+ signals.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@asyncflowstate/core":"2.0.1"},"_hasShrinkwrap":false,"devDependencies":{"rxjs":"^7.8.2","zone.js":"^0.15.0","@angular/core":"^19.2.5"},"peerDependencies":{"rxjs":"^7.8.0","@angular/core":"^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular_2.0.1_1775772480382_0.362497980657585","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@asyncflowstate/angular","version":"2.0.2","keywords":["angular","angular17","signals","services","async","state","loading","error-handling","ux","typescript","data-fetching","state-management","rxjs"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","_id":"@asyncflowstate/angular@2.0.2","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"homepage":"https://asyncflowstate-js.pages.dev/frameworks/angular","bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"dist":{"shasum":"0d945b81c8f575f3eee6c840549621470a6120e5","tarball":"https://registry.npmjs.org/@asyncflowstate/angular/-/angular-2.0.2.tgz","fileCount":9,"integrity":"sha512-hB0few5ziE0oV/B9X3kFPi2DJX9UCrof4lMz7+yP+3OsFjiKUn9Fjkc5IJ2bmZYC8VLmvMC1ZkmgKqr1sM1HEA==","signatures":[{"sig":"MEUCIQCbrRu6/SyHLH2fFmSBKIGRs7cKq4g7j1gL6NZjk402tQIgeHZGJwRJOB+r5yeY8X9sI6f5JKeVbPoKaErCtBAbq08=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":79960},"main":"./dist/index.js","_from":"file:asyncflowstate-angular-2.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"node":">=18.0.0"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"private":false,"scripts":{"dev":"tsup --watch","test":"vitest","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"_resolved":"/tmp/8bfccf2e2a740ce4416e65619f4863ac/asyncflowstate-angular-2.0.2.tgz","_integrity":"sha512-hB0few5ziE0oV/B9X3kFPi2DJX9UCrof4lMz7+yP+3OsFjiKUn9Fjkc5IJ2bmZYC8VLmvMC1ZkmgKqr1sM1HEA==","repository":{"url":"git+https://github.com/devhimanshuu/asyncflowstate.git","type":"git","directory":"packages/angular"},"_npmVersion":"10.8.2","description":"Official Angular bindings for AsyncFlowState. Signal-based services (injectFlow, FlowService) for managing async loading, error, and success states with Angular 17+ signals.","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@asyncflowstate/core":"2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"rxjs":"^7.8.2","zone.js":"^0.15.0","@angular/core":"^19.2.5"},"peerDependencies":{"rxjs":"^7.8.0","@angular/core":"^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular_2.0.2_1775774293235_0.008088485159587933","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@asyncflowstate/angular","version":"3.0.0","private":false,"description":"Official Angular bindings for AsyncFlowState. Signal-based services (injectFlow, FlowService) for managing async loading, error, and success states with Angular 17+ signals.","keywords":["angular","angular17","signals","services","async","state","loading","error-handling","ux","typescript","data-fetching","state-management","rxjs"],"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/devhimanshuu/asyncflowstate.git","directory":"packages/angular"},"bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"homepage":"https://asyncflowstate-js.pages.dev/frameworks/angular","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"sideEffects":false,"engines":{"node":">=18.0.0"},"peerDependencies":{"@angular/core":"^17.0.0 || ^18.0.0 || ^19.0.0","rxjs":"^7.8.0"},"dependencies":{"@asyncflowstate/core":"3.0.0"},"devDependencies":{"@angular/core":"^19.2.5","rxjs":"^7.8.2","zone.js":"^0.15.0"},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest","typecheck":"tsc --noEmit"},"_id":"@asyncflowstate/angular@3.0.0","_integrity":"sha512-GjFk2Uat/NK1F2mg3vyhot6JOxhJBmUrXK/yjtEdxjaeAEkuuZG0aABXjqEIAib4YJPoZOy4Y9sswPY7W3BmFQ==","_resolved":"C:\\Users\\pc\\AppData\\Local\\Temp\\8360c3f7170940f560f20502c4c76138\\asyncflowstate-angular-3.0.0.tgz","_from":"file:asyncflowstate-angular-3.0.0.tgz","_nodeVersion":"22.17.1","_npmVersion":"11.13.0","dist":{"integrity":"sha512-GjFk2Uat/NK1F2mg3vyhot6JOxhJBmUrXK/yjtEdxjaeAEkuuZG0aABXjqEIAib4YJPoZOy4Y9sswPY7W3BmFQ==","shasum":"486006a018ae6be4c422efcf496511db3b17d2b4","tarball":"https://registry.npmjs.org/@asyncflowstate/angular/-/angular-3.0.0.tgz","fileCount":9,"unpackedSize":89947,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIASeU5jVIzejjuQCv+1puciM9xCyGuimQUu2ViXSGxJRAiEAgsc8hkxMoCc3v5UawibzWgO1RYAX8oliyqlBUv2yKyU="}]},"_npmUser":{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"},"directories":{},"maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/angular_3.0.0_1777546157432_0.425365762946035"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-09T20:20:37.740Z","modified":"2026-04-30T10:49:17.696Z","2.0.0":"2026-04-09T20:20:38.005Z","2.0.1":"2026-04-09T22:08:00.524Z","2.0.2":"2026-04-09T22:38:13.357Z","3.0.0":"2026-04-30T10:49:17.567Z"},"bugs":{"url":"https://github.com/devhimanshuu/asyncflowstate/issues"},"author":{"name":"AsyncFlowState Contributors"},"license":"MIT","homepage":"https://asyncflowstate-js.pages.dev/frameworks/angular","keywords":["angular","angular17","signals","services","async","state","loading","error-handling","ux","typescript","data-fetching","state-management","rxjs"],"repository":{"type":"git","url":"git+https://github.com/devhimanshuu/asyncflowstate.git","directory":"packages/angular"},"description":"Official Angular bindings for AsyncFlowState. Signal-based services (injectFlow, FlowService) for managing async loading, error, and success states with Angular 17+ signals.","maintainers":[{"name":"devhimanshuu","email":"devhimanshuu@gmail.com"}],"readme":"<div align=\"center\">\n  <a href=\"https://github.com/devhimanshuu/asyncflowstate\">\n    <img src=\"https://raw.githubusercontent.com/devhimanshuu/asyncflowstate/main/assets/AsyncFlowState_logo.png\" width=\"120\" height=\"120\" alt=\"AsyncFlowState Logo\" />\n  </a>\n  <h1>@asyncflowstate/angular <span style=\"font-size: 14px; background: #dd003122; color: #dd0031; padding: 4px 10px; border-radius: 20px; vertical-align: middle; margin-left: 10px;\">v3.0.0 Stable</span></h1>\n  <p><b>Official Angular bindings for AsyncFlowState — the industry-standard engine for predictable async UI behavior.</b></p>\n\n  <p>\n    <a href=\"https://asyncflowstate-js.pages.dev/frameworks/angular\"><img src=\"https://img.shields.io/badge/Documentation-Link-blue.svg\" alt=\"Documentation\" /></a>\n    <a href=\"https://opensource.org/licenses/MIT\"><img src=\"https://img.shields.io/badge/License-MIT-emerald.svg\" alt=\"License: MIT\" /></a>\n    <a href=\"https://www.npmjs.com/package/@asyncflowstate/angular\"><img src=\"https://img.shields.io/npm/v/@asyncflowstate/angular?color=indigo\" alt=\"NPM Version\" /></a>\n  </p>\n</div>\n\n## Installation\n\n```bash\npnpm add @asyncflowstate/angular @asyncflowstate/core\n```\n\n## Quick Start\n\n### Basic Usage\n\n```typescript\nimport { Component, OnDestroy } from \"@angular/core\";\nimport { createFlow } from \"@asyncflowstate/angular\";\nimport { AsyncPipe, NgIf } from \"@angular/common\";\n\n@Component({\n  standalone: true,\n  imports: [AsyncPipe, NgIf],\n  template: `\n    <ng-container *ngIf=\"userFlow.state$ | async as state\">\n      <button (click)=\"userFlow.execute('user-123')\" [disabled]=\"state.loading\">\n        {{ state.loading ? \"Loading...\" : \"Fetch User\" }}\n      </button>\n      <p *ngIf=\"state.data\">{{ state.data.name }}</p>\n      <p *ngIf=\"state.error\" class=\"error\">{{ state.error.message }}</p>\n    </ng-container>\n  `,\n})\nexport class UserComponent implements OnDestroy {\n  userFlow = createFlow(\n    async (id: string) => {\n      const res = await fetch(`/api/users/${id}`);\n      return res.json();\n    },\n    {\n      onSuccess: (user) => console.log(\"Fetched:\", user.name),\n      retry: { maxAttempts: 3, backoff: \"exponential\" },\n    },\n  );\n\n  ngOnDestroy() {\n    this.userFlow.destroy();\n  }\n}\n```\n\n### In a Service\n\n```typescript\nimport { Injectable, OnDestroy } from \"@angular/core\";\nimport { createFlow, createFlowList } from \"@asyncflowstate/angular\";\n\n@Injectable({ providedIn: \"root\" })\nexport class UserService implements OnDestroy {\n  fetchUser = createFlow(\n    async (id: string) => {\n      const res = await fetch(`/api/users/${id}`);\n      return res.json();\n    },\n    { retry: { maxAttempts: 3 } },\n  );\n\n  deleteUser = createFlowList(async (id: string) => {\n    await fetch(`/api/users/${id}`, { method: \"DELETE\" });\n  });\n\n  ngOnDestroy() {\n    this.fetchUser.destroy();\n    this.deleteUser.destroy();\n  }\n}\n```\n\n### Using with RxJS\n\n```typescript\nimport { createFlow } from \"@asyncflowstate/angular\";\nimport { filter, map } from \"rxjs/operators\";\n\nconst flow = createFlow(fetchData);\n\n// Use RxJS operators on the observable\nflow.state\n  .pipe(\n    filter((state) => state.isSuccess),\n    map((state) => state.data),\n  )\n  .subscribe((data) => {\n    console.log(\"Success:\", data);\n  });\n```\n\n### Sequential Workflows\n\n```typescript\nimport { createFlowSequence } from \"@asyncflowstate/angular\";\n\nconst sequence = createFlowSequence([\n  { name: \"Validate\", flow: validateFlow.flow },\n  { name: \"Submit\", flow: submitFlow.flow },\n  { name: \"Notify\", flow: notifyFlow.flow },\n]);\n\n// In template:\n// <ng-container *ngIf=\"sequence.state$ | async as state\">\n//   <button (click)=\"sequence.execute()\" [disabled]=\"state.loading\">\n//     Run Workflow ({{ state.progress }}%)\n//   </button>\n// </ng-container>\n```\n\n## <i class=\"fa-solid fa-sparkles text-amber-500\"></i> New in v3.0\n\n- **Flow DNA:** Self-healing async state using behavioral pattern matching.\n- **Ambient Intelligence:** Predictive background monitoring for Angular services.\n- **Speculative Execution:** Low-latency interactions based on intent prediction.\n- **Emotional UX:** Adaptive system load-aware UI transitions.\n- **Collaborative Mesh:** Real-time state synchronization across sessions.\n- **Edge-First Actions:** Optimized for global edge networks.\n- **Temporal Trace:** Full history replay for complex async sequences.\n- **Telemetry Hub:** Integrated monitoring for all application flows.\n\n## Comprehensive Examples\n\n### 1. Enterprise Services: The Core Engine\n\nEncapsulate your async logic in a service and expose it as a reactive flow.\n\n```typescript\nimport { Injectable, OnDestroy } from \"@angular/core\";\nimport { createFlow } from \"@asyncflowstate/angular\";\n\n@Injectable({ providedIn: \"root\" })\nexport class ProductService implements OnDestroy {\n  // 1. Define the flow in your service\n  productDetails = createFlow((id: string) => api.fetchDetails(id), {\n    retry: { maxAttempts: 3 },\n    predictive: { prefetchOnHover: true },\n  });\n\n  ngOnDestroy() {\n    this.productDetails.destroy();\n  }\n}\n```\n\n### 2. Component Integration: Reactive UI\n\nBind directly to the flow state with the `async` pipe.\n\n```typescript\n@Component({\n  template: `\n    <div *ngIf=\"productService.productDetails.state$ | async as state\">\n      <button\n        (click)=\"productService.productDetails.execute(id)\"\n        [disabled]=\"state.loading\"\n      >\n        {{ state.loading ? \"Loading...\" : \"View Product\" }}\n      </button>\n\n      <div *ngIf=\"state.data\" class=\"content\">\n        {{ state.data.title }}\n      </div>\n\n      <p *ngIf=\"state.error\" class=\"error\">{{ state.error.message }}</p>\n    </div>\n  `,\n})\nexport class ProductComponent {\n  constructor(public productService: ProductService) {}\n}\n```\n\n### 3. AI-Powered: Flow DNA & Self-Healing\n\nLeverage behavioral pattern matching to optimize your Angular flows automatically.\n\n```typescript\nconst flow = createFlow(api.syncData, {\n  dna: {\n    enabled: true,\n    learningRate: 0.1, // Adapts to environmental network latency\n  },\n});\n```\n\n### 4. RxJS Power: Declarative Chaining\n\nTransform and filter flow states using standard RxJS operators.\n\n```typescript\nthis.authFlow.state$\n  .pipe(\n    filter((state) => state.status === \"success\"),\n    switchMap((state) => this.profileFlow.execute(state.data.userId)),\n  )\n  .subscribe();\n```\n\n### 5. Multi-Step Workflows: `createFlowSequence`\n\nManage complex wizard steps with centralized progress tracking.\n\n```typescript\nconst sequence = createFlowSequence([\n  { name: \"Validation\", flow: step1.flow },\n  { name: \"Submission\", flow: step2.flow },\n  { name: \"Analytics\", flow: step3.flow },\n]);\n\n// Template:\n// <progress [value]=\"sequence.state.progress\" max=\"100\"></progress>\n```\n\n## <i class=\"fa-solid fa-sparkles text-amber-500\"></i> New in v3.0\n\n- **Flow DNA:** Self-healing async state using behavioral pattern matching.\n- **Ambient Intelligence:** Predictive background monitoring for Angular services.\n- **Speculative Execution:** Low-latency interactions based on intent prediction.\n- **Emotional UX:** Adaptive system load-aware UI transitions.\n- **Collaborative Mesh:** Real-time state synchronization across sessions.\n- **Edge-First Actions:** Optimized for global edge networks.\n- **Temporal Trace:** Full history replay for complex async sequences.\n- **Telemetry Hub:** Integrated monitoring for all application flows.\n\n## API Reference\n\n| Function                               | Description                                       |\n| -------------------------------------- | ------------------------------------------------- |\n| `createFlow(action, options?)`         | Core factory for managing async actions           |\n| `createFlowSequence(steps)`            | Orchestrate sequential workflows                  |\n| `createFlowParallel(flows, strategy?)` | Run flows in parallel                             |\n| `createFlowList(action, options?)`     | Manage multiple keyed flow instances              |\n| `createInfiniteFlow(action, options)`  | Manage paginated/infinite scrolling data fetching |\n\nAll instances expose `state$` (BehaviorSubject) and `state` (Observable) for template binding.\n\n## Cleanup\n\nAlways call `destroy()` in `ngOnDestroy()`:\n\n```typescript\nngOnDestroy() {\n  this.flow.destroy();\n}\n```\n\n## License\n\nMIT © [AsyncFlowState Contributors](https://github.com/devhimanshuu/asyncflowstate)\n","readmeFilename":"README.md"}