Signal creation and reading in Angular

Introduction

Signals help you keep track of changing data in your app simply and clearly.

When you want to store a value that changes over time and update the UI automatically.

When you need to share reactive data between parts of your Angular app.

When you want to avoid complex state management and keep code easy to read.

When you want to react to user input or external events by updating values.

When you want to build components that update only when needed for better performance.

Syntax

Angular

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

const mySignal = signal(initialValue);

// To read the current value:
const currentValue = mySignal();

Use signal() to create a new signal with an initial value.

Call the signal like a function (mySignal()) to get its current value.

Examples

Create a signal holding number 0 and read its value.

Angular

const count = signal(0);
console.log(count()); // prints 0

Create a signal holding a string and read it.

Angular

const name = signal('Alice');
console.log(name()); // prints 'Alice'

Create a signal holding a boolean and read it.

Angular

const isVisible = signal(true);
console.log(isVisible()); // prints true

Sample Program

This Angular component uses a signal to hold a counter value.

The template shows the current count by calling count().

Clicking the button calls increment() which updates the signal value.

The UI updates automatically when the signal changes.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <h2>Counter: {{ count() }}</h2>
    <button (click)="increment()">Add 1</button>
  `
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.set(this.count() + 1);
  }
}

Important Notes

Signals are functions you call to get their current value.

Use set() method to update a signal's value.

Signals automatically notify Angular to update the UI when their value changes.

Summary

Signals store reactive values you can read by calling them like functions.

Use signal(initialValue) to create and signal() to read.

Updating signals triggers automatic UI updates in Angular components.