Angular Undo Redo 履歴ストア | ng-hub-ui-history

Signals に優しい API、トランザクション、上限、リアクティブフォーム対応を備えた Angular の undo redo 履歴ストア。

概要

チームがこのライブラリを探す理由

外部の本格的な状態管理ライブラリを導入せずに、複雑な状態に対して undo と redo が必要なとき、この Angular 履歴ストアを使ってください。

インストール

npm install ng-hub-ui-history

ジャンプ

最適な用途

  • エディター
  • フォームビルダー
  • ローコードツール
  • 設定 UI

について history

ng-hub-ui-history は、ユーザーが安全に戻れることを期待する Angular のエディター、フォームビルダー、設定画面で特に役立ちます。重厚なアーキテクチャ選択を強いることなく、状態を持つワークフローに undo と redo のパターンをもたらします。

機能ガイド

手動コミットとタイムトラベル

状態の変更を追跡し、線形の履歴を前後に移動します。

サンプル:
Basic History

Manual commit, undo and redo.

{
  "title": "Getting Started with History",
  "description": "Edit and commit to create undo/redo entries."
}

ネストされたオブジェクトと配列

深いオブジェクトグラフやリストの変更には、パッチベースの追跡を使用します。

サンプル:
Nested Object History

Nested properties and dynamic list updates.

{
  "id": "invoice-1",
  "customer": {
    "name": "Acme Corp",
    "city": "Madrid"
  },
  "lines": [
    {
      "name": "Support plan",
      "quantity": 1,
      "unitPrice": 150
    }
  ]
}

自動フォーム追跡

組み込みのウォッチヘルパーで、フォーム値の変更を自動コミットします。

サンプル:
Reactive Form Watch

watchForm() for automatic commits from FormGroup.

{
  "name": "Maria",
  "email": "maria@demo.local",
  "role": "Editor"
}

トランザクションと保持

複数の操作を1つのエントリにまとめ、設定された制限に従って古いエントリを削除します。

サンプル:
Transactions + Limits

Consolidated commits and FIFO retention.

Pointer: -1 / Entries: 0 / Bytes: 0

{
  "id": "transaction-editor",
  "title": "Release notes draft",
  "content": "Initial draft content.",
  "tags": [
    "draft"
  ]
}

主な機能

最近の変更

Version 0.1.0 - 2/23/26, 12:00 AM

added: Initial release with multi-object linear history.

added: Undo/redo, transactions, and maxEntries/maxBytes retention limits.

added: Reactive Forms auto-commit integration via watchForm().

関連ライブラリ

ng-hub-ui-sortable ng-hub-ui-utils ng-hub-ui-paginable