Angular Undo-Redo-History-Store | ng-hub-ui-history

Angular Undo- und Redo-History-Store mit Signals-freundlichen APIs, Transaktionen, Limits und Unterstützung für Reactive Forms.

Zuletzt aktualisiert 20.09.2026

Übersicht

Warum Teams nach dieser Bibliothek suchen

Nutze diesen Angular History-Store, wenn du Undo und Redo für komplexen State brauchst, ohne eine vollständige externe State-Bibliothek einzuführen.

Installieren

npm install ng-hub-ui-history

Springen zu

Ideal für

  • Editoren
  • Formular-Builder
  • Low-Code-Tools
  • Konfigurationsoberflächen

Über history

ng-hub-ui-history ist besonders nützlich in Angular-Editoren, Formular-Buildern und Konfigurationsbildschirmen, in denen der Benutzer erwartet, sicher zurückgehen zu können. Es bringt Undo- und Redo-Muster in zustandsbehaftete Workflows, ohne dich zu einer schwergewichtigen Architekturentscheidung zu zwingen.

Funktionsleitfäden

Manuelle Commits und Zeitreise

Verfolgen Sie Zustandsänderungen und reisen Sie vorwärts/rückwärts durch die lineare History.

Beispiele:
Grundlegender Verlauf

Manueller Commit, Undo und Redo für ein einzelnes verfolgtes Objekt. 

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

Verschachtelte Objekte und Arrays

Verwenden Sie patch-basiertes Tracking für tiefe Objektgraphen und Listenmutationen.

Beispiele:
Verlauf verschachtelter Objekte

Verschachtelte Eigenschaften und Listenänderungen, als Patches aufgezeichnet. 

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

Automatisches Formular-Tracking

Committen Sie Formularwertänderungen automatisch mit integrierten Watch-Helpern.

Beispiele:
Reaktive Formularüberwachung

watchForm() committet jede Wertänderung der FormGroup von selbst. 

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

Transaktionen und Aufbewahrung

Gruppieren Sie mehrere Operationen in einem Eintrag und kürzen Sie alte Einträge gemäß den konfigurierten Limits.

Beispiele:
Transaktionen + Limits

Durch eine Transaktion zusammengefasste Commits, unter Eintrags- und Byte-Limits.

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

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

Hauptfunktionen

Letzte Änderungen

Version 22.0.6 - 9/20/26, 12:00 AM

changed: The npm keywords name the problem the package solves — undo-redo, time-travel, state-management, store, transactions, diff, patch, reactive-forms — which is what somebody looking for it would type. Metadata only: no code, types or styles change.

Version 22.0.5 - 9/16/26, 12:00 AM

changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.

Version 22.0.4 - 9/6/26, 12:00 AM

fixed: The published manifest no longer declares a main entry. It pointed at src/public-api.ts, the ng-packagr entry file, which never travels inside the tarball, so any resolver that ignores the exports map (older bundlers, legacy Jest resolution, plain require) followed it straight to a file that is not there. Dropping the field leaves exports, module and typings as the only entry points, the shape ng-packagr emits for every other library in the monorepo.

fixed: A commit that only moves a Date (or a Set, Map or RegExp) is recorded again. The default diff walked every object key by key, and those types keep their payload outside their own enumerable keys, so the comparison found nothing and produced an empty patch. An empty patch reads as no change: commit() returned false, the tracked state kept the old value that getState() and states() then handed back, and on a mixed commit undo() restored the other fields while leaving the new date in place, all without an error. Those values are now compared and replaced as a whole, which is what structuredClone already round-trips; an instance rebuilt with the same content still records no entry.

Version 22.0.3 - 9/1/26, 12:00 AM

changed: The homepage in the manifest points at this library's own documentation page rather than at the site root. It is the link a registry shows beside the package and the one a reader clicks from it, and landing on a front page they then have to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only — no code, no types, no styles change, and nothing a consumer imports is affected.

Version 22.0.2 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.0.1 - 7/28/26, 12:00 AM

added: Test suite for the diff/patch/clone utilities and multi-object undo/redo: cloneDeep isolation (nested structures, Dates), createDefaultDiff/applyDefaultPatch round-trips across representative shapes (nested objects, array insert/remove/reorder, key deletion, null transitions, deep nesting), estimateBytes sanity, and store-level coverage for independent per-object timelines, no-op transactions and redo invalidation after transactional commits. No runtime changes.

Version 22.0.0 - 6/17/26, 12:00 AM

changed: Aligned with Angular 22.

changed: README documentation standardized.

Version 0.1.0 - 6/17/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().

Verwandte Bibliotheken

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

Häufig gestellte Fragen

Wie füge ich einer Angular-Anwendung Undo und Redo hinzu?

createHistoryStore() liefert Ihnen einen Store. Rufen Sie einmal registerObject(id, initialState) auf, bei jeder Änderung commit(id, nextState, { label }) und dann undo(id) und redo(id), wobei canUndo(id) und canRedo(id) die Buttons steuern. states ist ein Signal mit dem aktuellen Wert von allem, was verfolgt wird, ein Template liest es also direkt. Komponente oder Direktive gibt es in diesem Paket keine: Diese Factory und ihre Typen sind die gesamte Oberfläche.

Kann es ein Reactive Form verfolgen?

watchForm(id, form) abonniert valueChanges und committet jede Änderung für Sie, und es gibt die Funktion zurück, die das wieder beendet — es räumt nicht von selbst auf, behalten Sie diesen Callback also und rufen Sie ihn auf, wenn die Komponente verschwindet. skipInitial ignoriert die erste Emission. Committet wird form.value und nicht getRawValue(), ein deaktiviertes Control steht also nicht im Snapshot und ein Undo stellt es nicht wieder her. beginTransaction und endTransaction fassen eine Serie von Änderungen zu einem einzigen Undo-Schritt zusammen.

Wie viel Historie hält es vor?

maxEntries steht standardmäßig auf 100 und maxBytes auf 512000, jeweils pro verfolgtem Objekt gezählt, und die ältesten Einträge fallen zuerst heraus; history(id) gibt die Metadaten zurück und clearHistory(id) fängt von vorn an. Die Zeitachse ist linear und gilt pro Objekt: ein Schritt auf einmal, keine Verzweigungen, kein Undo über mehrere Objekte hinweg, und nichts wird in einen Speicher geschrieben, ein Reload startet also leer.

Belegt es Strg+Z von selbst?

Nein. Das Paket hat überhaupt kein DOM — kein Tastaturkürzel, keine Toolbar, kein ARIA —, Sie binden Strg+Z also selbst an undo(id). Zwei weitere Dinge überraschen häufig. Der Store ist eine schlichte Factory und kein injizierbarer Service, ihn zwischen Komponenten zu teilen heißt also, ihn selbst bereitzustellen. Und commit oder undo mit einer nie registrierten id wirft einen Fehler, statt false zurückzugeben — und das mit Absicht: ein Tippfehler in einer id würde sonst stillschweigend fehlschlagen.