Implementing a Signals Store in an Angular application

Implementing a Signals Store in an Angular application involves creating a centralized place to manage state and events, enhancing the predictability and maintainability of your app. Angular, by design, does not include a built-in solution for state management akin to Redux in React. However, Angular developers often rely on libraries like NgRx, Akita, or NgXS for these purposes. A “Signals Store” can be akin to using observables to manage state changes and propagate them throughout your application. Here’s a basic approach to creating a Signals Store using RxJS, which is already part of Angular’s ecosystem.

Step 1: Setting Up Angular Project

Ensure you have Angular CLI installed. If not, you can install it via npm:

npm install -g @angular/cli

Create a new Angular project:

ng new signals-store-app

Navigate to your project directory:

cd signals-store-app

Step 2: Creating a Signal Store Service

Generate a service to act as your store:

ng generate service store

Open the store.service.ts file and set up a simple signal store using RxJS’s BehaviorSubject and Observable:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class StoreService {
  private readonly _signals = new BehaviorSubject<any[]>([]);

  get signals$(): Observable<any[]> {
    return this._signals.asObservable();
  }

  private get signals(): any[] {
    return this._signals.getValue();
  }

  private set signals(val: any[]) {
    this._signals.next(val);
  }

  addSignal(signal: any): void {
    this.signals = [
      ...this.signals,
      signal,
    ];
  }

  removeSignal(id: number): void {
    this.signals = this.signals.filter(signal => signal.id !== id);
  }
}

This service uses BehaviorSubject to keep a private state of signals, which are accessible via the signals$ observable. The addSignal and removeSignal methods modify the state, which automatically updates all subscribers.

Step 3: Using the Store in Components

Inject the StoreService in your components to use the store:

import { Component, OnInit } from '@angular/core';
import { StoreService } from './store.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-signal-list',
  template: `
    <ul>
      <li *ngFor="let signal of signals$ | async">
        {{ signal.name }} - {{ signal.value }}
      </li>
    </ul>
  `,
})
export class SignalListComponent implements OnInit {
  signals$: Observable<any[]>;

  constructor(private storeService: StoreService) {}

  ngOnInit(): void {
    this.signals$ = this.storeService.signals$;
  }
}

In this component, you subscribe to the signals$ observable from the StoreService and use the async pipe in the template to automatically subscribe and unsubscribe, rendering the signals list dynamically.

Step 4: Modifying Signals

You can modify signals by calling addSignal or removeSignal from any component or service that injects the StoreService:

this.storeService.addSignal({ id: 1, name: 'Signal 1', value: 'Value 1' });

This approach provides a simple, RxJS-based state management solution in Angular without relying on external libraries. It’s a basic implementation and can be extended with more complex state management features as needed, like selectors or effects for handling side-effects.