Angular Academy · Lesson

Creating and Reading Signals

Declare writable signals and read their values.

Lesson 2 of 413 steps

Creating and Reading Signals is a free Angular Academy lesson on CoddyKit. This is lesson 2 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.

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 0

The 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 === 0

Reading 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()); // 10

Explicit 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()); // null

Object Signals

A signal can hold any value, including objects and arrays.

const point = signal({ x: 0, y: 0 });
console.log(point().x); // 0

Array Signals

Arrays work the same way. Reading returns the current array reference.

const items = signal<string[]>(['a', 'b']);
console.log(items().length); // 2

Signals 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 available

Naming 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.

Answer it in the interactive lesson

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.

Free to start

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

Start learning free View the full course

Frequently Asked Questions

Is the “Creating and Reading Signals” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Creating and Reading 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 “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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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

← Back to Angular Academy