What Are Signals
Understand signals as reactive state containers.
What Are Signals is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Are Signals?
A signal is a reactive primitive introduced in modern Angular. It is a wrapper around a value that can notify interested consumers when that value changes.
Signals make Angular reactivity explicit, granular, and easy to reason about.
Why Reactivity Matters
In a UI framework, the screen must stay in sync with your data. When data changes, the view should update.
Signals give Angular a precise way to know exactly what changed and what depends on it, so only the affected parts of the view are refreshed.
The Problem Before Signals
Previously Angular relied on Zone.js and broad change detection: after any async event Angular re-checked large parts of the component tree.
That works, but it can be wasteful. Signals enable fine-grained updates without scanning everything.
A Signal Holds a Value
Think of a signal as a smart box around a value. You can read what is inside it, and you can replace what is inside it.
Reading a signal also records who is reading, so dependents can be updated later.
import { signal } from '@angular/core';
const count = signal(0);
// count is now a signal holding the number 0Reading Is a Function Call
A key idea: to read a signal you call it like a function. The parentheses are how Angular knows you are reading the current value.
const count = signal(0);
console.log(count()); // 0 <-- note the ()Signals Are Synchronous
Reading a signal is synchronous and always returns the current value immediately. There is no subscription, no async pipe, and no manual unsubscribe to manage.
Writable vs Computed
The basic signal created with signal() is writable: you can change its value.
There are also computed signals (derived values) and effects (side effects), which build on top of writable signals.
Signals Track Dependencies
When a computed value or a template reads a signal, Angular records that dependency automatically.
Later, if the signal changes, only those dependents are recalculated. This is what makes signals efficient.
Glitch-Free Updates
Signals are designed to be glitch-free: consumers always see a consistent value and are not notified with intermediate, half-updated state.
This makes complex reactive graphs predictable.
Where Signals Live
Signals are part of @angular/core. You import signal, computed, and effect from there.
They can be used inside components, services, or any TypeScript code.
import { signal, computed, effect } from '@angular/core';Signals in a Component
A common pattern is to declare signals as class fields in a component, then read them in the template.
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '' })
export class CounterComponent {
count = signal(0);
}Quick Check: Signal Basics
Let us verify your understanding of what a signal is.
Recap: What Are Signals
You learned that a signal is a reactive wrapper around a value that notifies consumers on change. You read a signal by calling it with parentheses, reads are synchronous, and signals enable fine-grained, glitch-free updates.
Next you will create and read your own signals.
Frequently asked questions
Is the “What Are Signals” lesson free?
Yes — the full text of “What Are Signals” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “What Are Signals”?
Understand signals as reactive state containers. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “What Are Signals” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.