Angular Signals: A Beginner-Friendly Guide for Interviews

Signals changed how Angular handles state and change detection. Learn signal, computed and effect with simple examples.

Signals are reactive values that notify Angular when they change. Because Angular knows exactly which parts of the UI depend on which signals, updates can be precise and efficient. Expect at least one signals question in modern Angular interviews.

The three building blocks

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

const count = signal(0);                       // writable signal
const double = computed(() => count() * 2);    // derived, read-only

effect(() => console.log('count is', count())); // runs when count changes

count.set(5);
count.update(v => v + 1); // 6

• signal() holds a value; read it by calling it like a function
• computed() derives a value from other signals and is cached until a dependency changes
• effect() runs side effects whenever the signals it reads change

Signals vs RxJS observables

Signals always have a current value and are synchronous — great for UI state. Observables represent streams of events over time — great for HTTP calls, WebSocket messages and complex async workflows. They work together: toSignal() and toObservable() convert between them.

Signal inputs

export class UserCard {
  name = input.required<string>();
  greeting = computed(() => `Hello, ${this.name()}!`);
}

• Angular
• Signals
• Change Detection