Angular·Angular from components to production

Signals

Use signals for fine-grained reactivity and computed state.

Intermediate 13 min read Lesson 9 of 300 Challenge included

What you will be able to do

Create signals with signal().
Derive with computed().
Update with set() or update().
Use effect sparingly for side effects.

In plain English

A signal is a reactive value with explicit reads and writes. computed derives from signals, and effect runs side effects. Signals make dependencies visible to the compiler and reduce change-detection work.

counter.component.tsTYPESCRIPT

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="increment()">Clicked {{ count() }} times</button>
    <p>Double: {{ double() }}</p>
  `,
})
export class CounterComponent {
  count = signal(0)
  double = computed(() => this.count() * 2)
  increment() { this.count.update((value) => value + 1) }
}

Your turn

Derive a total

Easy

Create a computed signal that doubles a count signal.

TYPESCRIPT · starter

double = computed(() => count)

Check your understanding before moving on.

Knowledge checkQuestion 1

How do you read a signal in a template?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Build and test

Lesson 9 of 300 · 0% of course