Learn Angular Signals Writable, Computed, and Effects Explained

Learn About Angular Signals

In the following technical article, I will share my real-time knowledge about Angular Signals.

What are Signals in Angular?

Before Angular version 16, you would declare a variable like:

name: string = '';

and rely on zone.js for change detection. With signals, there is no dependency on zone.js; they automatically track changes and notify consumers.

Here is the syntax for a signal in Angular:

name = signal<string>('');

Here:

• signal() is a function used to create a signal with type string.
• string is the type of the signal, which is optional.
• '"" is the initial value.

Types of Reactive Primitives in Angular

• Writable Signals
• Computed Signals
• Effects

Writable Signals

count = signal(0);
or
count: WritableSignal<number> = signal(0);

<p>{{ count() }}</p>

count.set(10);
<p>{{ count() }}</p>

10

count.update((val) => val + 1);

count = signal(0);
doubleCount = computed(() => count() * 2);

doubleCount.set(10);       
// Error
doubleCount.update(val => val + 1); // Error

effect(() => {  this.signal_name();});

import { signal, computed, effect } from '@angular/core';
// state
const n1 = signal(1);
const n2 = signal(2);// derived 
valueconst sum = computed(() => n1() + n2());
// side effecteffect(() => {
console.log('Sum:',sum());
});// update valuen1.set(5);

Effect in Angular Signals

An effect() runs a side effect whenever one or more signals it reads changes. Effects are useful for logging, DOM manipulation, or triggering external operations.

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

const count = signal(0);

effect(() => {
  console.log('Count changed to:', count());
});

count.set(5); // logs: Count changed to: 5

Signals vs Traditional Change Detection

When to Use Signals?

Signals are the future of Angular reactivity. Use them for:

• Component-level state (replacing simple @Input() patterns)
• Derived values that depend on other reactive state (computed())
• Replacing simple BehaviorSubject patterns in services

For complex async data flows, RxJS Observables still have an important role — especially for HTTP calls and event streams. Angular signals and RxJS work well together using toSignal() and toObservable().

Conclusion

Angular Signals represent a major shift in how Angular handles reactivity. They are simpler, more predictable, and more performant than zone-based change detection. If you are building new Angular 16+ projects, signals should be your default choice for managing component state.