🌐 ngx-global-state

You do not need to use complex and verbose state management like NGRX! Here is a lightweight Angular service for creating global, reactive, and optionally persistent state across your application — no need for complex state management libraries like NGRX.

📦 Installation

npm install ngx-global-state --save

🚀 Getting Started

1. Inject the Service

import { NgxGlobalStateService } from 'ngx-global-state'; constructor(private state: NgxGlobalStateService) {}

2. Register a State Property

Before using a state key, you must register it. You can also choose to persist it in localStorage.

this.state.registerState('user', true); // 'true' enables persistence

3. Set a Value

this.state.set('user', { name: 'John', age: 42 });

4. Get a Value (in TypeScript)

const user = this.state.get('user');
console.log(user?.name); // Output: "John"

🖼️ Using State in HTML Templates

Assign to a Component Property

userName: string = '';
ngOnInit() {
this.state.registerState('user', true);
const user = this.state.get('user');
this.userName = user?.name ?? ''; }
}

<p>Hello, {{ userName }}!</p>

🧹 Clear State

Clear a Single Key

this.state.clearState('user');

Clear All Keys

this.state.clearAll();