angular

@ngstato/angular

NgRx requires 9 concepts for an async action. ngStato requires 1.

Angular Signals. Dependency injection. Built-in DevTools. ~1 KB.

Documentation · Angular Guide · API Reference

---

Install

npm install @ngstato/core @ngstato/angular

Full working example — 3 files

1. Config — one-time setup:

// app.config.ts
provideStato({
  http: { baseUrl: 'https://api.example.com' },
  devtools: isDevMode()
})

2. Store — state + actions + selectors in one object:

// users.store.ts
import { createStore, http, connectDevTools }  from '@ngstato/core'
import { StatoStore }                          from '@ngstato/angular'

export const UsersStore = StatoStore(() => {
  const store = createStore({
    users:   [] as User[],
    loading: false,
    error:   null as string | null,

    selectors: {
      total:  (s) => s.users.length,
      admins: (s) => s.users.filter(u => u.role === 'admin')
    },

    actions: {
      async loadUsers(state) {
        state.loading = true
        state.users   = await http.get('/users')
        state.loading = false
      },

      async deleteUser(state, id: string) {
        await http.delete(`/users/${id}`)
        state.users = state.users.filter(u => u.id !== id)
      }
    },

    hooks: { onInit: (s) => s.loadUsers() }
  })

  connectDevTools(store, 'Users')
  return store
})

3. Component — everything is a Signal:

// users.component.ts
@Component({
  template: `
    @if (store.loading()) { <spinner /> }
    
    <h2>Users ({{ store.total() }})</h2>
    
    @for (user of store.users(); track user.id) {
      <div>
        {{ user.name }}
        <button (click)="store.deleteUser(user.id)">×</button>
      </div>
    }
  `
})
export class UsersComponent {
  store = injectStore(UsersStore)
}

That's the entire pattern. No reducers, no effects class, no action creators, no selectors file.

---

What you get

What you define	What Angular gets
users: [] (state)	store.users() → WritableSignal
total: (s) => s.users.length (selector)	store.total() → computed Signal (memoized)
async loadUsers(state) { ... } (action)	store.loadUsers() → Promise<void>

All Signals update automatically. Zero manual subscriptions.

---

DevTools — zero install, all browsers

<stato-devtools />

• Draggable, resizable, minimizable panel
• Action history with timestamps and duration
• State diffs — before/after for every action
• Current state explorer
• Works on mobile
• Impossible to enable in production (isDevMode())

	NgRx	ngStato
Setup	Chrome extension	<stato-devtools />
Mobile	❌	✅
Prod safety	Manual	Automatic

---

Why teams switch

	NgRx v21	@ngstato
Bundle	~50 KB gzip	~4 KB (core + angular)
Async action	rxMethod + pipe + tap + switchMap + from + tapResponse + patchState	async/await
CRUD store	~90 lines, 3+ files	~45 lines, 1 file
DevTools	Chrome only	All browsers + mobile
Entity adapter	✅	✅
Feature composition	✅	✅ mergeFeatures()
Concurrency	RxJS operators	✅ exclusive queued abortable
Testing	provideMockStore	✅ createMockStore()
Persistence	Custom meta-reducers	✅ withPersist()

---

📖 Documentation

becher.github.io/ngStato

Start in 5 min · Angular guide · Testing · CRUD recipe · NgRx migration · API

License

MIT