Hey Angular devs! 👋
Tired of manually syncing browser storage across your components? I just published a new library that brings reactive Angular Signals directly to your <code>localStorage</code> and <code>sessionStorage</code>.
With <code>@telperion/ng-pack/storage-signals</code>, you get a fully type-safe, Signal-based API that updates automatically across your app. It even supports deep object property access using simple dot notation!
<pre><code>import { Component } from &#x27;@angular/core&#x27;;
import { localStorageSignal } from &#x27;@telperion/ng-pack/storage-signals&#x27;;

@Component({
 selector: &#x27;app-settings&#x27;,
 template: `
 &lt;div&gt;
 &lt;p&gt;Theme: {{ theme() }}&lt;/p&gt;
 &lt;button (click)=&quot;theme.set(&#x27;dark&#x27;)&quot;&gt;Dark Mode&lt;/button&gt;
 &lt;/div&gt;
 `
})
export class SettingsComponent {
 // Access nested properties with dot notation
 theme = localStorageSignal&lt;string&gt;(&#x27;settings&#x27;, &#x27;ui.theme&#x27;);
}
</code></pre>
Check it out on NPM and let me know what you think: <a href="https://www.npmjs.com/package/@telperion/ng-pack" target="_blank" rel="noopener nofollow">https://www.npmjs.com/package/@telperion/ng-pack</a>
#angular #signals #webdevelopment #frontend #opensource

Local Storage Signals