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
}

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
}

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
}

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);
  }
}

Hint

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

Practice

1. What is the primary purpose of using signal() in Angular signal-based components?

easy

A. To create a CSS style binding

B. To define a new Angular module

C. To handle HTTP requests

D. To create reactive data that updates the UI automatically

Solution

1. Step 1: Understand what signal() does

   signal() creates a reactive value that Angular tracks for changes.

2. Step 2: Connect signal() to UI updates

   When the signal value changes, Angular automatically updates the UI without manual intervention.

3. Final Answer:

   To create reactive data that updates the UI automatically -> Option D

4. Quick Check:

   signal() creates reactive data = D [OK]

Hint: Remember: signal() means reactive data for UI updates [OK]

Common Mistakes:

• Confusing signal() with module or HTTP functions
• Thinking signal() handles styling
• Assuming signal() is for event handling

2. Which of the following is the correct way to update a signal value named count in Angular?

easy

A. set(count, 5);

B. count = 5;

C. count.set(5);

D. update(count, 5);

Solution

1. Step 1: Recall the signal update method

   Signals have a set() method to assign a new value.

2. Step 2: Check the syntax for updating count

   The correct syntax is count.set(5); to update the signal value.

3. Final Answer:

   count.set(5); -> Option C

4. Quick Check:

   Use set() method to update signals = A [OK]

Hint: Use .set() to change signal values, not direct assignment [OK]

Common Mistakes:

• Trying to assign directly like a normal variable
• Using update() instead of set() incorrectly
• Calling set() as a standalone function

3. Given this Angular signal-based component code:

const count = signal(0);
count.set(count() + 1);
console.log(count());

What will be printed in the console?

medium

A. 1

B. 0

C. undefined

D. Error

Solution

1. Step 1: Understand initial signal value

   The signal count starts at 0.

2. Step 2: Evaluate the update expression

   count.set(count() + 1); reads current value 0, adds 1, sets new value 1.

3. Step 3: Check the console output

   console.log(count()); prints the updated value 1.

4. Final Answer:

   1 -> Option A

5. Quick Check:

   Initial 0 + 1 = 1 printed = B [OK]

Hint: Remember to call signal() to get value, then set() to update [OK]

Common Mistakes:

• Forgetting to call count() to get value
• Expecting 0 because of no visible loop
• Confusing set() with update()

4. Identify the error in this Angular signal-based component snippet:

const name = signal('Alice');
name.update('Bob');

medium

A. Signals cannot hold string values

B. Using update() with a direct value instead of a function

C. Missing parentheses after signal()

D. name should be declared with let, not const

Solution

1. Step 1: Check usage of update() method

   update() expects a function to modify the current value, not a direct value.

2. Step 2: Identify the incorrect argument

   Passing 'Bob' directly causes an error; it should be name.update(value => 'Bob') or use set().

3. Final Answer:

   Using update() with a direct value instead of a function -> Option B

4. Quick Check:

   update() needs a function argument = C [OK]

Hint: update() requires a function, set() accepts direct value [OK]

Common Mistakes:

• Passing direct value to update() instead of a function
• Confusing update() and set() usage
• Thinking signals can't hold strings

5. You want to create a signal-based Angular component that tracks a list of tasks and adds a new task reactively. Which approach correctly updates the tasks signal when adding a new task "Learn Signals"?

hard

A. tasks.set([...tasks(), 'Learn Signals']);

B. tasks.update(tasks.push('Learn Signals'));

C. tasks = [...tasks(), 'Learn Signals'];

D. tasks.set(tasks.push('Learn Signals'));

Solution

1. Step 1: Understand signal holding an array

   The signal tasks holds an array, accessed by calling tasks().

2. Step 2: Correctly add a new task immutably

   Use spread syntax to create a new array with existing tasks plus the new one, then set it with tasks.set().

3. Step 3: Identify incorrect options

   Options B and D misuse push() which returns length, not array; C assigns directly, breaking reactivity.

4. Final Answer:

   tasks.set([...tasks(), 'Learn Signals']); -> Option A

5. Quick Check:

   Use set() with new array copy = A [OK]

Hint: Use set() with new array copy, never push() directly on signal [OK]

Common Mistakes:

• Using push() inside update() or set() incorrectly
• Assigning directly to signal variable
• Not creating a new array copy for immutability