Creating and Reading Signals
Declare writable signals and read their values.
Creating and Reading Signals is a free Angular Academy lesson on CoddyKit — lesson 2 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.
Creating a Signal
You create a writable signal with the signal() factory, passing the initial value.
import { signal } from '@angular/core';
const c = signal(0); // initial value is 0The Initial Value Sets the Type
TypeScript infers the signal type from the initial value. signal(0) is a WritableSignal<number>.
const name = signal('Alice'); // WritableSignal<string>
const flag = signal(false); // WritableSignal<boolean>Reading a Signal
Call the signal to read its current value. This returns the stored value and registers a dependency if you are inside a reactive context.
const c = signal(0);
const current = c(); // current === 0Reading Multiple Times
You can read a signal as often as you like. Each call returns the latest value at the moment of the call.
const c = signal(10);
console.log(c()); // 10
console.log(c()); // 10Explicit Typing
You can give an explicit type when the initial value does not capture it fully, for example a value that can also be null.
const user = signal<string | null>(null);
console.log(user()); // nullObject Signals
A signal can hold any value, including objects and arrays.
const point = signal({ x: 0, y: 0 });
console.log(point().x); // 0Array Signals
Arrays work the same way. Reading returns the current array reference.
const items = signal<string[]>(['a', 'b']);
console.log(items().length); // 2Signals as Class Fields
In components and services, declare signals as fields. They are initialized once when the instance is created.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
}Reading in the Component Class
You can read a signal anywhere in the class, for example inside a method, by calling it.
export class CounterStore {
count = signal(0);
isZero(): boolean {
return this.count() === 0;
}
}Read-Only Access
If you want to expose a signal without letting consumers change it, you can expose it via the asReadonly() method.
const internal = signal(0);
export const value = internal.asReadonly();
// value() works; value.set is not availableNaming Conventions
A common convention is to name the signal after the value it holds (for example count, items), since reading looks like a normal accessor: count().
Quick Check: Creating Signals
Test your grasp of creating and reading signals.
Recap: Create and Read
You now know how to create a writable signal with signal(initialValue), how TypeScript infers its type, and how to read it by calling it. You also saw asReadonly() for exposing read-only access. Next: updating signal values.
Frequently asked questions
Is the “Creating and Reading Signals” lesson free?
Yes — the full text of “Creating and Reading 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 “Creating and Reading Signals”?
Declare writable signals and read their values. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Creating and Reading 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