What Are Signals
Understand signals as reactive state containers.
What Are Signals is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “What Are Signals” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “What Are Signals”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
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.
All lessons in this course
- What Are Signals
- Creating and Reading Signals
- Updating Signals with set and update
- Signals in Templates