🚀 Akita State Management in Angular 19 – A Complete Guide with Example

 

When building large-scale Angular applications, managing complex state can quickly become overwhelming. That’s where Akita shines — a powerful and developer-friendly state management library for Angular that helps you manage your application state in a scalable, maintainable, and reactive way.

In this article, we’ll explore what Akita is, why it’s better than boilerplate-heavy alternatives, and walk through a real-world example of using Akita in Angular 19 with standalone components.

---

🔍 What is Akita?

Akita is a reactive state management library built on top of RxJS. Created by Datorama, it encourages a model-based, observable-driven approach that’s easy to scale and test.

✅ Unlike NgRx, Akita has less boilerplate, is easier to learn, and integrates seamlessly with Angular’s DI system.

---

🧠 Why Use Akita for State Management in Angular?

• ✅ Less boilerplate than NgRx
• ✅ Supports multiple stores (e.g., per feature or entity)
• ✅ Reactive and observable out of the box
• ✅ Built-in support for entity stores (perfect for lists, tables, etc.)
• ✅ Great devtools via Akita Devtools Extension

---

🛠️ Getting Started with Akita in Angular 19

Step 1: Install Akita

bash

npm install @datorama/akita

For development tools:

bash

npm install @datorama/akita-ngdevtools

---

Step 2: Setup Akita in main.ts

ts

import { enableAkitaProdMode, akitaDevtools } from '@datorama/akita';

if (import.meta.env.PROD) {
  enableAkitaProdMode();
} else {
  akitaDevtools();
}

---

📦 Create a Feature Store: Counter Example

Let’s manage a counter state using Akita.

Step 3: Define the Model

ts

// src/app/models/counter.model.ts
export interface CounterState {
  count: number;
}

---

Step 4: Create the Store

ts

// src/app/state/counter.store.ts
import { Injectable } from '@angular/core';
import { Store, StoreConfig } from '@datorama/akita';
import { CounterState } from '../models/counter.model';

export const createInitialState = (): CounterState => ({
  count: 0,
});

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'counter' })
export class CounterStore extends Store<CounterState> {
  constructor() {
    super(createInitialState());
  }

  increment() {
    this.update(state => ({ count: state.count + 1 }));
  }

  decrement() {
    this.update(state => ({ count: state.count - 1 }));
  }

  reset() {
    this.update(createInitialState());
  }
}

---

Step 5: Create a Query

ts

// src/app/state/counter.query.ts
import { Injectable } from '@angular/core';
import { Query } from '@datorama/akita';
import { CounterState } from '../models/counter.model';
import { CounterStore } from './counter.store';

@Injectable({ providedIn: 'root' })
export class CounterQuery extends Query<CounterState> {
  count$ = this.select('count');

  constructor(protected override store: CounterStore) {
    super(store);
  }
}

---

Step 6: Create a Standalone Angular Component

ts

// src/app/components/counter.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CounterQuery } from '../state/counter.query';
import { CounterStore } from '../state/counter.store';

@Component({
  standalone: true,
  selector: 'app-counter',
  imports: [CommonModule],
  template: `
    <div class="container text-center mt-5">
      <h2>Akita Counter Example</h2>
      <h3 class="mt-3">Count: {{ count$ | async }}</h3>
      <button class="btn btn-primary m-1" (click)="increment()">Increment</button>
      <button class="btn btn-danger m-1" (click)="decrement()">Decrement</button>
      <button class="btn btn-secondary m-1" (click)="reset()">Reset</button>
    </div>
  `
})
export class CounterComponent {
  count$ = this.counterQuery.count$;

  constructor(
    private counterStore: CounterStore,
    private counterQuery: CounterQuery
  ) {}

  increment() {
    this.counterStore.increment();
  }

  decrement() {
    this.counterStore.decrement();
  }

  reset() {
    this.counterStore.reset();
  }
}

---

📊 Akita DevTools

For debugging and state visualization, install the Akita DevTools Chrome extension.

---

✅ When to Use Akita

Akita is perfect for:

• Apps with shared state across components
• CRUD-heavy applications (e.g., admin panels, dashboards)
• Entity management (users, posts, products)
• Angular apps that want a simple yet powerful alternative to NgRx

---

🧾 Summary

Akita is a modern and robust state management solution that integrates beautifully with Angular's reactive ecosystem. With minimal boilerplate and great developer ergonomics, it offers everything you need for scalable and maintainable app architecture.

Whether you're building a startup MVP or a complex enterprise dashboard, Akita will help you manage state like a pro.