Skip to main content
The HeroPageComponent demonstrates reactive state management using Angular signals to handle dynamic form data and computed values.

​
Component Files

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

​
TypeScript Implementation

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

@Component({
    templateUrl: './hero-page.component.html'
})

export class HeroPageComponent {
name = signal('Ironman') 
age = signal(45)
getHeroDescription() {
    return `${this.name()} - ${this.age()}`;
}
changeHero() {
    this.name.set('spiderman');
    this.age.set(22);
}
changeAge() {
this.age.set(60);
}
resetForm() {
    this.name.set('Ironman')
    this.age.set(45)
    }
}

​
Signal Properties

The component maintains two reactive signals:

​
name

name = signal('Ironman')
Holds the hero’s name. Initialized with ‘Ironman’ as the default value.

​
age

age = signal(45)
Holds the hero’s age. Initialized with 45 as the default value.
Both signals are initialized with default values representing Ironman. The resetForm() method returns to these original values.

​
Methods

​
getHeroDescription()

Returns a formatted string combining the hero’s name and age: 
getHeroDescription() {
    return `${this.name()} - ${this.age()}`;
}
Returns: String in format “Name - Age” (e.g., “Ironman - 45”) Usage in template: 
<dd>{{ getHeroDescription() }}</dd>
This method demonstrates computed values based on signals. It will automatically re-execute when either name or age signals change.

​
changeHero()

Switches the hero to Spiderman with corresponding age: 
changeHero() {
    this.name.set('spiderman');
    this.age.set(22);
}
Effect: Updates both name and age signals atomically.

​
changeAge()

Updates only the age to 60: 
changeAge() {
    this.age.set(60);
}
Effect: Modifies the age signal while keeping the name unchanged.

​
resetForm()

Resets both signals to their initial values: 
resetForm() {
    this.name.set('Ironman')
    this.age.set(45)
}
Effect: Returns the form to the default Ironman state.

​
Template Features

​
Signal Reading

Signals are read by invoking them as functions: 
{{ name() }}
{{ age() }}

​
Signal Transformation

You can call methods on signal values directly in templates: 
{{ name().toUpperCase() }}
This calls the toUpperCase() method on the string returned by name().

​
Method Calls

Component methods can be called in templates: 
{{ getHeroDescription() }}

​
Event Binding

Buttons trigger methods using Angular’s event binding: 
<button (click)="changeHero()" class="btn btn-primary mx-2">
  Cambiar nombre
</button>

​
Data Flow

  1. Initial State: Component loads with Ironman (age 45)
  2. User Interaction: User clicks a button
  3. Signal Update: Method updates signal(s) using .set()
  4. Template Update: Angular automatically re-renders affected template sections
  5. Computed Values: Any methods using signals are re-executed
The template uses a definition list (<dl>, <dt>, <dd>) to display hero properties in a structured format.

​
Key Patterns

​
Using .set() for Direct Assignment

All updates use the set() method for direct value assignment: 
this.name.set('spiderman');
this.age.set(22);

​
Reading Signals in Methods

When reading signals in component methods, invoke them as functions: 
return `${this.name()} - ${this.age()}`;

​
Multiple Signal Updates

You can update multiple signals in a single method: 
changeHero() {
    this.name.set('spiderman');
    this.age.set(22);
}
Both updates will be processed, and the template will update once to reflect all changes.

​
Key Takeaways

  1. Simple state management - Signals provide reactive state without complex setup
  2. Computed values - Methods that read signals automatically react to changes
  3. Direct transformations - Signal values can be transformed directly in templates
  4. Multiple updates - Multiple signals can be updated in a single method
  5. Type safety - TypeScript infers signal types from initial values

Build docs developers (and LLMs) love

Get started for freeTalk to us