Angular Signals have recently emerged as a core piece of the Angular reactivity model, offering a more predictable and explicit mechanism for tracking and responding to change. While Signals are powerful on their own, developers often ask: how do you integrate them effectively with Angular’s forms and services, both of which are fundamental to most real-world applications? In this article, I’ll walk you through practical strategies to combine Signals with forms (both Reactive and Template-driven) and with custom Angular services, along with some key best practices.

Signals and Reactive Forms

Reactive Forms in Angular are designed around immutable state and explicit change management. By default, you’d use Observables (such as valueChanges) to listen for updates, but Signals make it possible to connect form state to your UI (or service logic) even more explicitly.

Example: Watching a FormControl with Signals

import { signal, effect } from '@angular/core';
import { FormControl } from '@angular/forms';

const emailControl = new FormControl('');
const emailSignal = signal(emailControl.value);

emailControl.valueChanges.subscribe(value => emailSignal.set(value));

// Now you can use emailSignal() reactively in your component

You can even wrap this pattern for reuse:

function controlToSignal<T>(control: FormControl<T>): Signal<T> {
  const sig = signal(control.value);
  control.valueChanges.subscribe(val => sig.set(val));
  return sig;
}

Signals and Template-Driven Forms

With Template-Driven Forms, accessing the underlying data requires more attention, but you can still set up signals on ngModelChange or from references to the FormControl instance. For complex forms, consider synchronizing explicit model objects with signals rather than using two-way binding everywhere.

Signals in Angular Services

Services are the backbone of Angular application state. Using signals inside services can provide immediate and synchronous state updates to any component that reads those signals.

Example: Signal-based Store Service

@Injectable({ providedIn: 'root' })
export class UserService {
  private _user = signal<User | null>(null);
  get user() { return this._user; }

  loadUser(userId: string) {
    this.http.get<User>(`/api/users/${userId}`).subscribe(user => {
      this._user.set(user);
    });
  }
}

Then in your component:

user = this.userService.user;

Accessing user() will always provide the latest state, and Angular will automatically re-render any bindings or computed signals that depend on it.

Best Practices

• Prefer signals for local, synchronous state and simple computed values. Use Observables for asynchronous streams and event-based data.
• Leverage the effect API for side effects, such as service interactions or logging, when signals change.
• When bridging between Observables and signals, remember to unsubscribe from Observables to avoid memory leaks.
• Avoid wrapping very large or frequently changing datasets as signals—this can lead to performance bottlenecks. Use signals for high-level state and Observables/async-pipes for streams.

Conclusion

Angular Signals are a valuable new tool for building highly reactive UIs and managing state more explicitly in your applications, especially when combined thoughtfully with Angular forms and services. By following these patterns, you can start harnessing the full power of Angular’s reactivity today. If you have questions, or examples of your own integrations, let’s discuss in the comments!