# ngxs-history-plugin

> A plugin that captures the state changes of an angular application which uses ngxs state management library

Latest version **1.0.2** (published 2021-04-16) · 0 weekly downloads

## Install

```sh
npm install ngxs-history-plugin
pnpm add ngxs-history-plugin
yarn add ngxs-history-plugin
bun add ngxs-history-plugin
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-04-16 |
| First published | 2021-03-18 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 122.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Fanis Prodromou |
| Maintainers | profanis |
| Keywords | ngxs, history plugin, ngxs history plugin, ngxs undo |

## Links

- npm: https://www.npmjs.com/package/ngxs-history-plugin
- Repository: https://github.com/profanis/ngxs-history-plugin
- Homepage: https://github.com/profanis/ngxs-history-plugin/tree/main/projects/ngxs-history-plugin
- Issues: https://github.com/profanis/ngxs-history-plugin/issues
- npm.io page: https://npm.io/package/ngxs-history-plugin

## Dependencies (1)

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

## Recent versions

- 1.0.2 (latest) — 2021-04-16
- 1.0.1 — 2021-04-14
- 1.0.0 — 2021-04-04
- 0.0.1 — 2021-03-18

## README

# ngxs-history-plugin

[![](https://img.shields.io/npm/dm/ngxs-history-plugin.svg?style=flat)](https://npmcharts.com/compare/ngxs-history-plugin?interval=30&minimal=true)
[![](https://img.shields.io/bundlephobia/min/ngxs-history-plugin)](https://bundlephobia.com/result?p=ngxs-history-plugin)

> This plugin is designed to work with the [NGXS](https://www.npmjs.com/package/@ngxs/store) state management library.

With this plugin we are able to capture the state changes and revert (_undo_) to the previous state by dispatching an action

## Demo

![Demo](../../src/assets/demo.gif)

🚀 See it in action on <a href="https://stackblitz.com/edit/angular-ngxs-history-plugin" target="_blank">Stackblitz</a>

## How to use

1. Install from NPM
2. Import the module in the `app.module`
3. Use the `undoable` decorator
4. Dispatch the `undo` action

### 1. Install from `NPM` registry

If you use **npm**

```
npm i ngxs-history-plugin
```

If you use **yarn**

```
yarn add ngxs-history-plugin
```

### 2. Import the module in the `app.module`

Import the package module

```
import { NgxsHistoryModule } from 'ngxs-history-plugin'
```

Import the Angular module

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    NgxsModule.forRoot([], {
      developmentMode: !environment.production,
    }),
    NgxsHistoryModule.forRoot(), // <-- import the module
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

You can optionally use the following `PluginOptions`

| Name          | Type   | Required | Description                                                               |
| ------------- | ------ | -------- | ------------------------------------------------------------------------- |
| historyLength | number | no       | the number of elements to keep in the history. Empty means no restriction |

**Example**

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    NgxsModule.forRoot([], {
      developmentMode: !environment.production,
    }),
    NgxsHistoryModule.forRoot({
      historyLength: 25, // <-- use the historyLength option
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

### 3. Use the `undoable` decorator

Set the `undoable` decorator in the state file for the actions you want to handle.

**Example:**

```ts
@Action(AddTodo)
@Undoable(AddTodo) // <-- set the decorator and provide the action to handle
addTodo(ctx: StateContext<TodoStateModel>, action: AddTodo) {
  const state = ctx.getState()

  const newItem = {
    title: action.title,
  }

  ctx.setState({
    ...state,
    items: [...state.items, newItem],
  })
}

```

### 4. Dispatch the `undo` action

Import the Undo Action

```ts
import { NgxsHistoryUndo } from 'ngxs-history-plugin'
```

Dispatch the action

```ts
undo() {
  this.store.dispatch(new NgxsHistoryUndo());
}
```

---

**Enjoy :)**

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