Signal-based components in Angular - Mini Project: Build & Apply

Building a Signal-Based Counter Component in Angular

📖 Scenario: You are creating a simple counter component for a web page. This counter will increase or decrease a number when buttons are clicked. You will use Angular's new signal-based system to manage the counter's value reactively.

🎯 Goal: Build a standalone Angular component that uses a signal to store a counter value. Add buttons to increase and decrease the counter. The displayed number updates automatically when the buttons are clicked.

📋 What You'll Learn

Create a signal to hold the counter value

Add a configuration variable for the step amount to increase or decrease

Implement functions to update the signal value using the step

Complete the component template with buttons and display the counter value

💡 Why This Matters

🌍 Real World

Signal-based components help build reactive user interfaces that update automatically when data changes, making apps more responsive and easier to maintain.

💼 Career

Understanding Angular signals is important for modern Angular development, improving performance and simplifying state management in professional projects.

1

Create the counter signal

Create a standalone Angular component named CounterComponent. Inside it, create a signal called counter initialized to 0 using Angular's signal function.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: ``,
})
export class CounterComponent {
  // Your code here
}

Need a hint?

Use signal(0) to create a reactive counter starting at zero.

2

Add a step configuration variable

Inside the CounterComponent, add a readonly variable called step and set it to 1. This will control how much the counter changes when buttons are clicked.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: ``,
})
export class CounterComponent {
  counter = signal(0);
  // Your code here
}

Need a hint?

Use readonly step = 1; to define the step size.

3

Add increment and decrement methods

Inside CounterComponent, add two methods: increment() and decrement(). Each should update the counter signal by adding or subtracting the step value respectively, using the update method on the signal.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: ``,
})
export class CounterComponent {
  counter = signal(0);
  readonly step = 1;

  // Your code here
}

Need a hint?

Use this.counter.update(value => value + this.step) to increase the counter.

4

Complete the component template

In the template property of CounterComponent, add two buttons labeled + and - that call increment() and decrement() on click. Also add a <div> that displays the current counter() value. Use Angular's template syntax to bind the click events and display the signal value.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    
  `,
})
export class CounterComponent {
  counter = signal(0);
  readonly step = 1;

  increment() {
    this.counter.update(value => value + this.step);
  }

  decrement() {
    this.counter.update(value => value - this.step);
  }
}

Need a hint?

Use (click)="increment()" on the + button and display the counter with {{ counter() }}.