stable 1.0.0

State

A tiny app-state with DOM binding: two-way mirror on form controls, write-only snapshots on events, automatic localStorage persistence, TTL and cross-tab sync. Link ng_state.js.

Never write into the internal store directly — always go through ng.state. Two distinct bindings: Mirror (data-ng-state + data-state-from) keeps a control and a key in sync both ways; Dataset snapshot (data-ng-state without data-state-from, e.g. on a button with data-state-val) records a value when the element is clicked.

Mirror (two-way)

"Two-way" means the binding works in both directions — and this demo shows each one:

1 · DOM → state	Type in the Name field (or flip the checkbox). You write into the DOM; the mirror writes into `ng.state`. The live box below updates by itself — it is a `watch()` on the key, no button pressed.
2 · state → DOM	Press “Set via API”. Now it is the code that writes (`ng.state.set(…)`) — and the input updates by itself. Same key, opposite direction.
3 · Persistence	Reload the page. The values come back: the state lives in `localStorage` (and syncs across tabs).

state.html

<form class="ng-form">
    <div class="ng-field mb-16">
        <label class="ng-label" for="st-name">Name (key demo:profile · prop name)</label>
        <input type="text" class="ng-input" id="st-name"
               data-ng-state
               data-state-id="demo:profile"
               data-state-prop="name"
               data-state-from="value"
               data-state-default="Mario">
    </div>
    <div class="ng-field mb-16">
        <label class="ng-check-nexi classic">
            <input type="checkbox"
                   data-ng-state
                   data-state-id="demo:profile"
                   data-state-prop="notify"
                   data-state-from="checked">
            <span class="ng-check-box"></span> Email notifications (prop notify)
        </label>
    </div>
</form>

ng.state.get('demo:profile') — live (via watch)

…

Attributes

`data-ng-state`	Marks the element as state-aware.
`data-state-id`	State key — recommended format `namespace:prop`.
`data-state-prop`	Property inside the key (object values).
`data-state-from`	`value` \| `checked` → enables the mirror.
`data-state-val` / `data-state-get`	Snapshot source on click (static value, or `value`/`checked`/`attr`).
`data-state-default`	Default when DOM and storage are empty.
`data-state-ttl`	Expiry in seconds (purged on load).
`data-state-debounce`	Debounce in ms for text inputs (default 300).

API

Watchers fire on set(), mirrored input, and changes from other tabs (BroadcastChannel).

app.js

ng.state.get('demo:profile');            // { name: 'Mario', notify: true }
ng.state.getAll();                       // whole app state
ng.state.set('demo:profile', { … });     // write (mirrored inputs update)
ng.state.remove('demo:profile');
ng.state.resetKey('demo:profile');
ng.state.resetNamespace('demo');
ng.state.reset();                        // everything

const unwatch = ng.state.watch('demo:profile', (val) => {
    console.log('changed:', val);        // fires on set, mirror input, other tabs
});
unwatch();

Anatomy

data-ng-state data-state-id data-state-prop data-state-from data-state-val data-state-get data-state-default data-state-ttl data-state-debounce

API

ng.state.get ng.state.getAll ng.state.set ng.state.remove ng.state.resetKey ng.state.resetNamespace ng.state.reset ng.state.watch

Reference

Generated from the component source (ng_state.js).

Component info

Name	`state`
Type	`js`
Version	`1.0.0`
Status	`stable`
JS	`/assets/js/ng_state.js`

Events

ng:state:change