{"id":20635958,"url":"https://github.com/adrianhdezm/ngx-xstate","last_synced_at":"2026-05-10T16:12:52.296Z","repository":{"id":203300757,"uuid":"708947638","full_name":"adrianhdezm/ngx-xstate","owner":"adrianhdezm","description":"XState utilities for Angular","archived":false,"fork":false,"pushed_at":"2023-10-25T06:08:35.000Z","size":2033,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T05:34:38.624Z","etag":null,"topics":["angular","finite-state-machines","state-management","statecharts","xstate"],"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/adrianhdezm.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-23T17:50:44.000Z","updated_at":"2024-10-07T20:58:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"66fbe0f2-9db8-4be2-9143-13ad35ee64a6","html_url":"https://github.com/adrianhdezm/ngx-xstate","commit_stats":{"total_commits":30,"total_committers":1,"mean_commits":30.0,"dds":0.0,"last_synced_commit":"8ce9c998c6deb5e41a860de3778ee49164f4eeca"},"previous_names":["adrianhdezm/ngx-xstate"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhdezm%2Fngx-xstate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhdezm%2Fngx-xstate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhdezm%2Fngx-xstate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrianhdezm%2Fngx-xstate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrianhdezm","download_url":"https://codeload.github.com/adrianhdezm/ngx-xstate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242650955,"owners_count":20163611,"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","finite-state-machines","state-management","statecharts","xstate"],"created_at":"2024-11-16T15:08:21.587Z","updated_at":"2026-05-10T16:12:47.252Z","avatar_url":"https://github.com/adrianhdezm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-xstate\n\nThis package contains utilities for using [XState](https://github.com/statelyai/xstate) with [Angular](https://github.com/angular/angular/).\n\n## Requisites\n\n- `ngx-xstate` requires Angular 15+. All tests were carried out using the standalone components approach. You can use Nx Angular Standalone Project or Angular CLI.\n\n## Installation\n\nTo get started with `ngx-xstate`, simply install the library using NPM:\n\n```bash\nnpm i xstate ngx-xstate\n```\n\n## Usage\n\nTo use `ngx-xstate` , create a new component inside your angular project. Create a statechart using the `createMachine` API and add it to your component using `inject(XStateService)`. For example:\n\n```ts\nimport { Component, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient, HttpClientModule } from '@angular/common/http';\nimport { NgxXStateModule, XStateService } from 'ngx-xstate';\nimport { createMachine } from 'xstate';\n\ntype Data = Record\u003cstring, unknown\u003e;\n\ninterface DataMachineContext {\n  data: Data[];\n  error: Error | null;\n}\n\ntype DataMachineEvent = { type: 'FETCH' } | { type: 'RETRY' } | { type: 'LOADED'; data: Data[] } | { type: 'ERROR'; message: string };\n\nexport const dataMachine = createMachine({\n  id: 'dataMachine',\n  predictableActionArguments: true,\n  schema: {\n    context: {} as DataMachineContext,\n    events: {} as DataMachineEvent,\n  },\n  initial: 'idle',\n  context: {\n    data: [],\n    error: null,\n  },\n  states: {\n    idle: { on: { FETCH: 'loading' } },\n    loading: {\n      invoke: {\n        src: 'fetchData',\n        onError: {\n          target: 'failure',\n          actions: assign({\n            error: (_, event) =\u003e new Error(event.data),\n          }),\n        },\n      },\n      on: {\n        LOADED: {\n          target: 'success',\n          actions: [\n            assign({\n              data: (_, event) =\u003e event.data,\n            }),\n          ],\n        },\n      },\n    },\n    success: {},\n    failure: { on: { RETRY: 'loading' } },\n  },\n});\n\n@Component({\n  standalone: true,\n  imports: [CommonModule, HttpClientModule, NgxXStateModule],\n  selector: 'example-app',\n  template: `\n    \u003ch1\u003eHello XState from Angular!\u003c/h1\u003e\n    \u003cbutton (click)=\"actor.send({ type: 'FETCH' })\"\u003eLoad\u003c/button\u003e\n    \u003chr /\u003e\n    \u003cng-container *ngIf=\"{ state: (actor.state$ | async)! } as vm\" [ngSwitch]=\"true\"\u003e\n      \u003cng-container *ngSwitchCase=\"vm.state.matches('loading')\"\u003eLoading...\u003c/ng-container\u003e\n      \u003cng-container *ngSwitchCase=\"vm.state.matches('success')\"\u003e\n        \u003cdiv *ngFor=\"let item of vm.state.context.data\"\u003e\n          {{ item['title'] }}\n        \u003c/div\u003e\n      \u003c/ng-container\u003e\n      \u003cng-container *ngSwitchCase=\"vm.state?.matches('failure')\"\u003e{{ vm.state.context.error?.message }}\u003c/ng-container\u003e\n    \u003c/ng-container\u003e\n  `,\n})\nexport class AppComponent {\n  http = inject(HttpClient);\n\n  actor = inject(XStateService).useMachine\u003ctypeof dataMachine\u003e(dataMachine, {\n    services: {\n      fetchData: () =\u003e (send) =\u003e {\n        this.http.get\u003cData[]\u003e('https://jsonplaceholder.typicode.com/posts').subscribe((data) =\u003e {\n          return send({\n            type: 'LOADED',\n            data,\n          });\n        });\n      },\n    },\n    devTools: true,\n  });\n}\n```\n\n## Contributing\n\nIf you're interested in contributing to `ngx-xstate`, please feel free to submit a pull request or open an issue on GitHub. We welcome all contributions and feedback!\n\n## License\n\n`ngx-xstate` is licensed under the MIT license. See the LICENSE file for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianhdezm%2Fngx-xstate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrianhdezm%2Fngx-xstate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrianhdezm%2Fngx-xstate/lists"}