Modern Angular State Management with Signals and Dependency Injection

#angular #programming #beginners

In this post, we’ll explore how to combine Angular’s Signals with Dependency Injection to create predictable, reactive, and reusable component state.

A Signal is a reactive value that notifies dependents when it changes.

Example:

import { signal } from '@angular/core';

const count = signal(0);
count(); // 0
count.set(1);

Managing State via Dependency Injection

Create a StateService that holds signals.
Provide it at the component or root level.

@Injectable({ providedIn: 'root' })
export class CounterState {
  count = signal(0);

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

Scoped State with Component Providers

@Component({
  selector: 'app-parrent',
  providers: [CounterState],
  templateUrl: './parent.html'
})
export class ParentComponent {
  state = inject(CounterState);
}

Using the State in child Components

@Component({
  selector: 'app-child',
  template: `
    <button (click)="state.increment()">+</button>
    <p>Count: {{ state.count() }}</p>
  `
})
export class ChildComponent {
  state = inject(CounterState);
}