Skip to main content
The CounterPage component demonstrates basic signal usage in Angular, comparing traditional property-based state with Angular signals, and implements the OnPush change detection strategy for optimal performance.

​
Component Files

The component is located at src/app/pages/counter/:
  • counter-page.ts - Component logic
  • counter-page.html - Template

​
TypeScript Implementation

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

@Component({
   templateUrl: './counter-page.html',
   styles:`
    button {
        padding: 5px;
        margin: 5px 10px;
        width: 75px;
    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
})


export class CounterPage {

    counter = 10;
    counterSignal = signal(10)
    incremento(value: number) {
        this.counter += value;
        this.counterSignal.update((current) => current + value);
    }

    resetContador(){
        this.counter = 0;
        this.counterSignal.set(0);
    }

}

​
Signal Usage

This component demonstrates two approaches to state management:

​
Traditional Property

counter = 10;
A standard class property that won’t trigger change detection with OnPush strategy.

​
Signal-based State

counterSignal = signal(10)
Angular signal that automatically triggers updates when changed.
With OnPush change detection, the traditional counter property won’t update in the template unless an event is triggered. The counterSignal works correctly because signals are reactive.

​
Methods

​
incremento(value: number)

Increments or decrements both counters by the specified value: 
incrementos(value: number) {
    this.counter += value;
    this.counterSignal.update((current) => current + value);
}
Parameters:
  • value - Amount to increment (positive) or decrement (negative)
Signal Update Pattern:
  • Uses update() method with a callback function
  • Receives current value and returns new value
  • Ensures immutable state updates

​
resetContador()

Resets both counters to zero: 
resetContador(){
    this.counter = 0;
    this.counterSignal.set(0);
}
Signal Update Pattern:
  • Uses set() method to directly assign a new value
  • Simpler than update() when you don’t need the current value

​
Change Detection Strategy

changeDetection: ChangeDetectionStrategy.OnPush
The component uses OnPush change detection, which only checks for changes when:
  • An input property reference changes
  • An event is triggered in the component
  • A signal used in the template changes
  • Change detection is manually triggered
OnPush strategy significantly improves performance by reducing the number of change detection cycles. Signals work perfectly with OnPush because they notify Angular when their values change.

​
Inline Styles

The component includes inline styles for the buttons: 
styles:`
 button {
     padding: 5px;
     margin: 5px 10px;
     width: 75px;
 }
`
These styles are scoped to this component only and won’t affect other buttons in the application.

​
Template Features

​
Signal Invocation

Signals are invoked as functions in templates: 
{{ counterSignal() }}

​
Event Binding

Click events are bound using Angular’s event binding syntax: 
(click)="incremento(1)"
(click)="incremento(-1)"
(click)="resetContador()"

​
Key Takeaways

  1. Signals are reactive - They automatically trigger template updates
  2. OnPush optimization - Use signals with OnPush for better performance
  3. Two update methods - Use set() for direct values, update() for computed values
  4. Function invocation - Signals must be called as functions in templates: counterSignal()

Build docs developers (and LLMs) love

Get started for freeTalk to us