Signal-based components in Angular

Introduction

Signal-based components help your app update the screen automatically when data changes. They make your code simpler and faster.

You want to show live data that changes often, like a clock or stock prices.

You want to avoid writing extra code to update the screen manually.

You want your app to be faster by only updating what really changes.

You want to write cleaner and easier-to-understand components.

You want to use the latest Angular features for reactive programming.

Syntax

Angular

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

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

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

The signal() function creates a reactive value that Angular tracks.

Use count() to read the current value inside the template or code.

Examples

Create a signal with 10, read it with count(), and set a new value with count.set().

Angular

count = signal(10);

// Read value
console.log(count());

// Update value
count.set(20);

Use update() to change the value based on the old value.

Angular

count = signal(0);

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

Signals can hold any type of data, like strings.

Angular

message = signal('Hello');

changeMessage() {
  this.message.set('Hi there!');
}

Sample Program

This component shows a button and a count. Each click increases the count automatically on screen.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: `
    <button (click)="increment()" aria-label="Increment count">Click me</button>
    <p>You clicked {{ count() }} times.</p>
  `
})
export class ClickCounterComponent {
  count = signal(0);

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

Important Notes

Signals automatically update the UI when their value changes, no extra code needed.

Use signal() only inside components or services where you want reactive data.

Remember to use count() to read the signal value, not count directly.

Summary

Signals hold reactive data that updates the UI automatically.

Use signal() to create reactive values and update() or set() to change them.

Signal-based components make your Angular apps simpler and faster.