ChatGPT
Perplexity
Claude
GrokTL;DR: Angular signals offer a simpler, more performant alternative to RxJS for managing reactive state in Angular apps. This guide explores how to use writable, computed, and linked signals to build scalable, reactive components in 2025.
Angular signals are transforming how developers manage state in Angular apps. If you’ve struggled with RxJS complexity or performance bottlenecks, signals offer a cleaner, more intuitive solution. In this guide, you’ll learn how to use signals to build reactive, scalable components in 2025 and beyond.
What are Angular Signals?
Think of Angular signals as smart containers for your application state that automatically notify interested parties when their values change. Unlike traditional reactive patterns, signals provide a synchronous, pull-based reactivity model that’s both intuitive and performant.
At its core, a signal is a wrapper around a value that tracks where it’s being used throughout your application. This granular tracking allows Angular to optimize rendering updates with surgical precision, updating only the components and DOM elements that depend on the changed data.
import { signal } from "@angular/core";
// Create a signal with an initial value
const count = signal(0);
// Read the signal's value by calling it as a function
console.log("Current count:", count()); // 0
// Update the signal's value
count.set(5);
count.update((current) => current + 1);The beauty of signals lies in their simplicity: they’re just getter functions that Angular can track automatically.
Why Angular Signals matter in 2025
Signals solve critical challenges that have plagued Angular development for years:
- Performance: Signals enable fine-grained reactivity, allowing Angular to skip entire component subtrees that don’t depend on changed state. This dramatically reduces change detection overhead, especially in complex applications.
- Developer experience: Manual subscription management and memory leak concerns are eliminated. Signals provide a clean, synchronous API that’s easier to reason about and debug.
- Framework evolution: As Angular moves toward a more reactive future, signals become the foundation for new features like signal-based components and improved SSR capabilities.
Core concepts: Understanding the signal trinity
Angular’s signal system has three fundamental building blocks that work together to create a complete reactive programming model.
Signals: Your reactive state containers
Writable signals are the foundation of your reactive state management:
import { signal, WritableSignal } from "@angular/core";
@Component({
template: `
<div>
<p>User: {{ user().name }}</p>
<p>Email: {{ user().email }}</p>
<button (click)="updateUser()">Update User</button>
</div>
`,
})
export class UserComponent {
user: WritableSignal<User> = signal({
name: "John Doe",
email: "john@example.com",
});
updateUser() {
this.user.update((current) => ({
...current,
email: "john.doe@newdomain.com",
}));
}
}
interface User {
name: string;
email: string;
}Computed signals: Derived state made easy
Computed signals automatically derive their values from other signals, creating a reactive dependency graph:
import { computed, signal } from "@angular/core";
import { FormsModule } from '@angular/forms';
@Component({
template: `
<div>
<input [(ngModel)]="firstName" />
<input [(ngModel)]="lastName" />
<h2>Welcome, {{ fullName() }}!</h2>
<p>Initials: {{ initials() }}</p>
</div>
`,
})
export class NameComponent {
firstName = signal("");
lastName = signal("");
// Automatically updates when firstName or lastName changes
fullName = computed(() => `${this.firstName()} ${this.lastName()}`.trim());
initials = computed(() =>
`${this.firstName().charAt(0)}${this.lastName().charAt(0)}`.toUpperCase());
}Effects: Reacting to signal changes
Effects run side effects in response to signal changes, perfect for logging, persistence, or DOM manipulation:
import { effect, signal } from "@angular/core";
@Component({})
export class DataPersistenceComponent {
userData = signal({ preferences: "dark-theme" });
constructor() {
// Automatically sync to localStorage when userData changes
effect(() => {
const data = this.userData();
localStorage.setItem("userData", JSON.stringify(data));
console.log("User data saved:", data);
});
}
}Getting started with Angular Signals
Basic setup
Start by importing the necessary functions from @angular/core. These imports provide everything you need to implement reactive patterns in your components:
import { signal, computed, effect, WritableSignal } from "@angular/core";Your first signal-powered component
Here’s a complete counter component that demonstrates the reactive nature of signals and how they automatically update the UI:
import { Component, signal, computed } from "@angular/core";
@Component({
selector: "app-counter",
standalone: true,
template: `
<div class="counter-container">
<h2>Count: {{ count() }}</h2>
<p>Double: {{ doubleCount() }}</p>
<p>Status: {{ status() }}</p>
<button (click)="increment()">+</button>
<button (click)="decrement()">-</button>
<button (click)="reset()">Reset</button>
</div>
`,
})
export class CounterComponent {
count = signal(0);
doubleCount = computed(() => this.count() * 2);
status = computed(() => {
const value = this.count();
if (value === 0) return "neutral";
return value > 0 ? "positive" : "negative";
});
increment() {
this.count.update((value) => value + 1);
}
decrement() {
this.count.update((value) => value - 1);
}
reset() {
this.count.set(0);
}
}How this reactive counter works
The count signal holds the main state, while doubleCount and status are computed signals that automatically derive their values from count. When you click any button to change the count value, Angular instantly updates all dependent computed signals and re-renders only the affected parts of the template. Notice how you access signal values in the template by calling them as functions {{ count() }}, and how the computed signals automatically recalculate without any manual coordination. This demonstrates the core power of signals: declarative state management with automatic reactivity.
Advanced usage and patterns
Angular signals offer sophisticated patterns for managing intricate state relationships and asynchronous operations as your application grows in complexity.
Linked signals for the dependent state
The new linkedSignal function solves a common problem: managing state that should automatically update based on other state changes, while still allowing manual user interactions. It’s perfect for dropdown selections that need to be reset when options change.
import { signal, linkedSignal } from "@angular/core";
@Component({})
export class ShippingComponent {
shippingOptions = signal([
{ id: 1, name: "Standard" },
{ id: 2, name: "Express" },
{ id: 3, name: "Overnight" },
]);
// Automatically resets to the first option when shipping options change
// but allows manual selection
selectedOption = linkedSignal(() => this.shippingOptions()[0]);
selectOption(option: ShippingOption) {
this.selectedOption.set(option);
}
}
interface ShippingOption {
id: number;
name: string;
}How linkedSignal works
Unlike computed signals (which are read-only), linkedSignal creates a writable signal that automatically updates when its source changes. In this example, selectedOption will always default to the first shipping option whenever shippingOptions changes, but users can still manually select different options using the selectOption method. This prevents the common UI bug where a user’s selection becomes invalid after data updates, while preserving user choice when possible.
Async reactivity with resources
The experimental resource function brings async operations into the signals world, providing a declarative way to handle data fetching that automatically reacts to signal changes. This powerful feature bridges the gap between synchronous signals and asynchronous operations like HTTP requests.
import { resource, signal } from "@angular/core";
@Component({})
export class UserProfileComponent {
userId = signal("123");
userResource = resource({
params: () => ({ id: this.userId() }),
loader: ({ params, abortSignal }) =>
fetch(`/api/users/${params.id}`, { signal: abortSignal }).then(
(response) => response.json()
),
});
// Reactive computed based on resource state
userName = computed(() => {
if (this.userResource.hasValue()) {
return this.userResource.value().name;
}
return "Loading...";
});
}In this example, the resource function creates a reactive data loader that:
- Automatically triggers when the
userIdsignal changes, thanks to the params - Handles request cancellation using the provided
abortSignalwhen parameters change mid-flight. - Provides loading states through properties like
isLoading,hasValue, andstatus. - Integrates seamlessly with other signals and computed values.
The resource object exposes several useful properties: value contains the loaded data, isLoading indicates request status, hasValue() acts as a type guard, and error captures any failures. This makes it incredibly easy to build robust UIs that handle loading states, errors, and data updates automatically.
Best practices and common pitfalls
Do’s
- Use computed signals for the derived state instead of effects
- Keep effects simple and focused on side effects only
- Leverage untracked() when reading signals without creating dependencies
- Use equality functions for custom comparison logic with complex objects
Don’ts
- Avoid side effects in computed signals: they should be pure functions
- Don’t use effects for state propagation: use computed signals instead
- Avoid excessive signal granularity: group related states together
- Don’t forget to handle loading states when working with resources
Common mistakes
// ❌ Wrong: Side effect in computed
const badComputed = computed(() => {
const data = this.data();
this.logService.log(data); // Side effect!
return data.processed;
});
// ✅ Correct: Use effect for side effects
const goodComputed = computed(() => this.data().processed);
effect(() => {
this.logService.log(this.data()); // Side effect in effect
});Understanding the separation of concerns
The key mistake above is mixing side effects (like logging) with computed signal logic. Computed signals should be pure functions that only transform input values and return results; they shouldn’t perform actions like logging, API calls, or DOM updates. When you include side effects in computed signals, Angular may call them multiple times during optimization, causing unwanted duplicate logs or operations. The correct approach separates these concerns: use computed signals purely for data transformation (goodComputed only processes the data), while effects handle all side effects like logging. This separation ensures predictable behavior and better performance.
Signals vs. RxJS observables
| Use signals for | Use RxJS for |
| Managing synchronous state | Handling complex async operations |
| Building reactive UI components | Needing time-based operators (debounce, throttle) |
| Optimizing change detection performance | Managing HTTP requests with retry logic. |
| Working with simple data flows | Working with event streams |
Combining signals with RxJS
Sometimes you need the best of both worlds: Signals for simple reactivity and RxJS for complex async operations. Angular provides seamless interoperability between these two systems through conversion functions.
import { Component, inject, signal } from "@angular/core";
import { toObservable, toSignal } from "@angular/core/rxjs-interop";
import { debounceTime, distinctUntilChanged, switchMap } from "rxjs";
@Component({})
export class SearchComponent {
searchTerm = signal("");
private searchService = inject(SearchService); // A dummy service.
// Convert signal to observable for RxJS operators
searchResults = toSignal(
toObservable(this.searchTerm).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap((term) => this.searchService.search(term))
)
);
onSearch(term: string) {
this.searchTerm.set(term);
}
}How the signal-RxJS bridge works
This example demonstrates a reactive search feature where user input triggers API calls with intelligent throttling. The toObservable() function converts the searchTerm signal into an RxJS observable, allowing us to use powerful operators like debounceTime (waits 300ms after the user stops typing), distinctUntilChanged (prevents duplicate requests), and switchMap (cancels previous requests when new ones arrive). Finally, toSignal() converts the result into a signal for easy template consumption. This hybrid approach gives you signal simplicity for UI state and RxJS power for complex async operations.
Real-world examples
UI reactivity: Dynamic theme system
This example demonstrates how signals create a seamless reactive theme system that automatically adapts to user preferences and system settings. The theme component showcases the power of computed signals to derive state from multiple sources while maintaining clean, predictable logic.
import { Component, computed, signal } from "@angular/core";
@Component({
template: `
<div [class]="themeClass()">
<select (change)="setTheme($event)">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="auto">Auto</option>
</select>
<p>Current theme: {{ currentTheme() }}</p>
</div>
`,
})
export class ThemeComponent {
selectedTheme = signal<"light" | "dark" | "auto">("auto");
systemTheme = signal<"light" | "dark">("light");
currentTheme = computed(() => {
const selected = this.selectedTheme();
return selected === "auto" ? this.systemTheme() : selected;
});
themeClass = computed(() => `theme-${this.currentTheme()}`);
constructor() {
// Listen for system theme changes
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
this.systemTheme.set(mediaQuery.matches ? "dark" : "light");
mediaQuery.addEventListener("change", (e) => {
this.systemTheme.set(e.matches ? "dark" : "light");
});
}
setTheme(event: Event) {
const target = event.target as HTMLSelectElement;
this.selectedTheme.set(target.value as any);
}
}How this reactive system works
- State management: Two writable signals (
selectedThemeandsystemTheme) hold the core state. TheselectedThemetracks user preference whilesystemThemereflects the OS color scheme preference. - Smart theme resolution: The
currentThemecomputed signal determines which theme to use. When the user selects auto, it defers to the system theme; otherwise, it uses their explicit choice. This computation runs automatically whenever either source signal changes. - CSS class generation: The
themeClasscomputed signal transforms the current theme into a CSS class name (like theme-dark or theme-light), creating clean separation between theme logic and styling. - System integration: The constructor sets up a
mediaQuerylistener that automatically updates the systemTheme signal when the user changes their OS dark mode preference, creating a reactive connection between system settings and your application. - Automatic updates: When any signal changes, all dependent computed signals recalculate automatically, and Angular updates only the affected DOM elements.
This declarative approach lets you define a theme based on various inputs, while the signals system handles all reactive updates without manual subscription management or complex state synchronization.
Form state tracking
This example showcases how signals excel at managing complex form state with real-time validation. By leveraging computed signals, we create a reactive validation system that automatically updates as users type, providing instant feedback without manual event handling or complex state synchronization.
import { Component, computed, signal } from "@angular/core";
@Component({})
export class ContactFormComponent {
formData = signal<ContactFormData>({
name: "",
email: "",
message: "",
});
// Validation signals
isNameValid = computed(() => this.formData().name.trim().length >= 2);
isEmailValid = computed(() =>
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData().email)
);
isMessageValid = computed(() => this.formData().message.trim().length >= 10);
// Form state signals
isFormValid = computed(
() => this.isNameValid() && this.isEmailValid() && this.isMessageValid()
);
formErrors = computed(() => ({
name: !this.isNameValid() ? "Name must be at least 2 characters" : "",
email: !this.isEmailValid() ? "Please enter a valid email" : "",
message: !this.isMessageValid() ? "Message must be at least 10 characters" : "",
}));
updateField(field: keyof ContactFormData, value: string) {
this.formData.update((current) => ({
...current,
[field]: value,
}));
}
}
interface ContactFormData {
name: string;
email: string;
message: string;
}Breaking down the reactive form architecture:
- Centralized form state: The
formDatasignal acts as a single source of truth for all form values, eliminating the need to track individual form controls separately and ensuring consistency across the component. - Individual field validation: Each validation rule becomes its computed signal (
isNameValid,isEmailValid,isMessageValid). These automatically re-evaluate whenever formData changes, providing real-time validation feedback without manual triggers. - Composite form validation: The
isFormValidcomputed signal combines all individual validations using logical AND. This creates a master validation state that updates automatically when any field’s validity changes, perfect for enabling/disabling submit buttons. - Dynamic error messages: The
formErrorscomputed signal generates user-friendly error messages based on validation state. It returns empty strings for valid fields and descriptive messages for invalid ones, making it easy to display conditional error UI. - Immutable updates: The
updateFieldmethod uses the signal’s update function with immutable patterns to modify form data. This ensures Angular’s change detection can track modifications efficiently while maintaining predictable state transitions. - Type safety: The
ContactFormDatainterface provides compile-time safety for field names and types, preventing typos and ensuring consistency.
Why this pattern is powerful:
- Zero boilerplate: No need for complex form builders, validators, or subscription management
- Instant reactivity: Validation updates happen automatically as users type
- Performance optimized: Only UI elements that depend on changed validations re-render
- Easily testable: Pure computed functions make unit testing straightforward
- Composable: Individual validation signals can be reused across different components
This transforms form handling from an imperative, event-driven process into a declarative, reactive system that’s more maintainable and performant.
Conclusion
Angular Signals are more than just a new feature; they’re a paradigm shift in building reactive Angular apps. By mastering writable, computed, and linked signals, you can simplify your codebase, improve performance, and future-proof your applications.
Here are the key points to remember:
- Signals provide fine-grained reactivity that optimizes change detection automatically
- Use computed signals for derived state and effects only for side effects
- The signal trinity (signals, computed, effects) covers most reactive programming needs
- Signals complement RxJS rather than replacing it entirely
- New features like linkedSignal and resources expand signals into complex state management scenarios
- Performance benefits are significant in large applications with complex component trees
As you embark on your signals journey, start small: convert a simple component to use signals, then gradually apply these patterns to larger parts of your application. Angular Signals are your gateway to building more responsive, maintainable, and performant web applications.
Ready to take your Angular skills to the next level? Explore how Syncfusion® Angular components integrate seamlessly with signals for even more power. If you require any assistance, please don’t hesitate to contact us via our support forum. We are always eager to help you!