Creating and Updating Signals

Signals are reactive containers for values. When a signal changes, all dependent computations and templates automatically update.

Creating a Signal

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `,
})
export class CounterComponent {
  count = signal(0);

  increment(): void {
    this.count.update(c => c + 1);
  }

  decrement(): void {
    this.count.update(c => c - 1);
  }
}

set() vs update()

// set() — replace the value directly
this.count.set(10);

// update() — compute new value from current
this.count.update(c => c + 1);

Reading Signals

// In component class — call as function
const currentValue = this.count();

// In template — call as function
<p>{{ count() }}</p>

Signal Types

// Primitive
const name = signal<string>('Alice');

// Object
const user = signal<User>({ id: 1, name: 'Alice' });

// Array
const items = signal<string[]>([]);

// Readonly (prevent external writes)
const readonlyCount = this.count.asReadonly();

Computed signals derive values from other signals. They are lazy and memoized.

Creating Computed Signals

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

@Component({
  selector: 'app-cart',
  template: `
    <p>Items: {{ itemCount() }}</p>
    <p>Total: {{ total() | currency: 'USD' }}</p>
    <p>Tax: {{ tax() | currency: 'USD' }}</p>
    <p>Grand Total: {{ grandTotal() | currency: 'USD' }}</p>
  `,
})
export class CartComponent {
  items = signal<CartItem[]>([
    { name: 'Widget', price: 10 },
    { name: 'Gadget', price: 20 },
  ]);

  itemCount = computed(() => this.items().length);

  total = computed(() =>
    this.items().reduce((sum, item) => sum + item.price, 0)
  );

  tax = computed(() => this.total() * 0.1);

  grandTotal = computed(() => this.total() + this.tax());
}

Computed Signal Characteristics

1. Lazy — Only computed when read
2. Memoized — Cached until dependencies change
3. Read-only — Cannot be set or updated

// BAD: Computed signals are read-only
this.total.set(100); // Error!

// GOOD: Update the source signal
this.items.update(items => [...items, newItem]);

Computed with Conditions

const isEligible = computed(() =>
  this.age() >= 18 && this.hasConsent()
);

const message = computed(() => {
  if (this.isEligible()) {
    return 'Access granted';
  }
  return 'Access denied';
});