# ngx-xstate

> XState utilities for Angular

Latest version **0.0.10** (published 2023-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-xstate
pnpm add ngx-xstate
yarn add ngx-xstate
bun add ngx-xstate
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2023-10-25 |
| First published | 2023-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.16.0 |
| Dependencies | 1 |
| Unpacked size | 29.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Adrian Hernandez-Mendez |
| Maintainers | adrianhdezm |
| Keywords | angular, xstate |

## Links

- npm: https://www.npmjs.com/package/ngx-xstate
- Repository: https://github.com/adrianhdezm/ngx-xstate
- Homepage: https://github.com/adrianhdezm/ngx-xstate#readme
- Issues: https://github.com/adrianhdezm/ngx-xstate/issues
- npm.io page: https://npm.io/package/ngx-xstate

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.0.10 (latest) — 2023-10-25
- 0.0.9 — 2023-10-25
- 0.0.8 — 2023-10-24
- 0.0.7 — 2023-10-24
- 0.0.6 — 2023-10-24
- 0.0.5 — 2023-10-24
- 0.0.4 — 2023-10-24
- 0.0.3 — 2023-10-24
- 0.0.2 — 2023-10-24
- 0.0.1 — 2023-10-24
- 0.0.0 — 2023-10-24

## README

# ngx-xstate

This package contains utilities for using [XState](https://github.com/statelyai/xstate) with [Angular](https://github.com/angular/angular/).

## Requisites

- `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.

## Installation

To get started with `ngx-xstate`, simply install the library using NPM:

```bash
npm i xstate ngx-xstate
```

## Usage

To 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:

```ts
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgxXStateModule, XStateService } from 'ngx-xstate';
import { createMachine } from 'xstate';

type Data = Record<string, unknown>;

interface DataMachineContext {
  data: Data[];
  error: Error | null;
}

type DataMachineEvent = { type: 'FETCH' } | { type: 'RETRY' } | { type: 'LOADED'; data: Data[] } | { type: 'ERROR'; message: string };

export const dataMachine = createMachine({
  id: 'dataMachine',
  predictableActionArguments: true,
  schema: {
    context: {} as DataMachineContext,
    events: {} as DataMachineEvent,
  },
  initial: 'idle',
  context: {
    data: [],
    error: null,
  },
  states: {
    idle: { on: { FETCH: 'loading' } },
    loading: {
      invoke: {
        src: 'fetchData',
        onError: {
          target: 'failure',
          actions: assign({
            error: (_, event) => new Error(event.data),
          }),
        },
      },
      on: {
        LOADED: {
          target: 'success',
          actions: [
            assign({
              data: (_, event) => event.data,
            }),
          ],
        },
      },
    },
    success: {},
    failure: { on: { RETRY: 'loading' } },
  },
});

@Component({
  standalone: true,
  imports: [CommonModule, HttpClientModule, NgxXStateModule],
  selector: 'example-app',
  template: `
    <h1>Hello XState from Angular!</h1>
    <button (click)="actor.send({ type: 'FETCH' })">Load</button>
    <hr />
    <ng-container *ngIf="{ state: (actor.state$ | async)! } as vm" [ngSwitch]="true">
      <ng-container *ngSwitchCase="vm.state.matches('loading')">Loading...</ng-container>
      <ng-container *ngSwitchCase="vm.state.matches('success')">
        <div *ngFor="let item of vm.state.context.data">
          {{ item['title'] }}
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="vm.state?.matches('failure')">{{ vm.state.context.error?.message }}</ng-container>
    </ng-container>
  `,
})
export class AppComponent {
  http = inject(HttpClient);

  actor = inject(XStateService).useMachine<typeof dataMachine>(dataMachine, {
    services: {
      fetchData: () => (send) => {
        this.http.get<Data[]>('https://jsonplaceholder.typicode.com/posts').subscribe((data) => {
          return send({
            type: 'LOADED',
            data,
          });
        });
      },
    },
    devTools: true,
  });
}
```

## Contributing

If 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!

## License

`ngx-xstate` is licensed under the MIT license. See the LICENSE file for more information.

---
_Source: https://npm.io/package/ngx-xstate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._