Signals as modern state primitive in Angular - Mini Project: Build & Apply

Signals as Modern State Primitive

📖 Scenario: You are building a simple Angular component to track the number of clicks on a button. Instead of using traditional state management, you will use Angular's signal to hold and update the click count reactively.

🎯 Goal: Create an Angular standalone component that uses a signal to store the click count. The component should display the current count and have a button that increments the count when clicked.

📋 What You'll Learn

Create a signal to hold the click count starting at 0

Add a function to increment the click count signal

Bind the signal value to the template to display the count

Add a button that calls the increment function on click

💡 Why This Matters

🌍 Real World

Signals provide a simple and efficient way to manage reactive state in Angular components, making UI updates automatic and easier to maintain.

💼 Career

Understanding signals is important for modern Angular development, improving performance and code clarity in real-world applications.

1

Set up the click count signal

In the Angular component, import signal from @angular/core and create a signal called clickCount initialized to 0.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: ``,
})
export class ClickCounterComponent {
  // Create a signal called clickCount initialized to 0
  
}

Hint

Use signal(0) to create a reactive state variable named clickCount.

2

Add increment function

Add a method called increment inside the component class that increases the clickCount signal value by 1 using the update method.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: ``,
})
export class ClickCounterComponent {
  clickCount = signal(0);

  // Add increment method to increase clickCount by 1
  
}

Hint

Use this.clickCount.update(count => count + 1) inside the increment method.

3

Display the click count in the template

In the component's template string, add a paragraph that shows the current value of clickCount using interpolation with {{ clickCount() }}.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: `
    
  `,
})
export class ClickCounterComponent {
  clickCount = signal(0);

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

Hint

Use interpolation {{ clickCount() }} inside a paragraph tag in the template.

4

Add button to increment click count

Add a button element inside the template that calls the increment method when clicked using (click)="increment()". The button text should be Click me.

Angular

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

@Component({
  selector: 'app-click-counter',
  standalone: true,
  template: `
    Click count: {{ clickCount() }}
    
  `,
})
export class ClickCounterComponent {
  clickCount = signal(0);

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

Hint

Add a button with (click)="increment()" and text Click me.

Practice

1. What is the main purpose of using signal() in Angular?

easy

A. To style elements dynamically

B. To create a reactive state value that updates the UI automatically

C. To handle HTTP requests

D. To define a new component

Solution

1. Step 1: Understand the role of signal()

   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 where it is used.

3. Final Answer:

   To create a reactive state value that updates the UI automatically -> Option B

4. Quick Check:

   signal() creates reactive state [OK]

Hint: Signals hold reactive values that auto-update UI [OK]

Common Mistakes:

• Confusing signals with components
• Thinking signals handle HTTP
• Assuming signals are for styling

2. Which of the following is the correct way to create a signal with initial value 10 in Angular?

easy

A. const count = signal(10);

B. const count = new Signal(10);

C. const count = createSignal(10);

D. const count = signal.set(10);

Solution

1. Step 1: Recall the syntax for creating signals

   Angular uses signal(initialValue) to create a signal with a starting value.

2. Step 2: Check each option's syntax

   Only const count = signal(10); matches the correct syntax. Others use incorrect constructors or methods.

3. Final Answer:

   const count = signal(10); -> Option A

4. Quick Check:

   signal() creates with initial value [OK]

Hint: Use signal(value) to create signals [OK]

Common Mistakes:

• Using new keyword with signal
• Calling non-existent createSignal function
• Trying to set value during creation

3. Given the code:

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

What will be printed in the console?

medium

A. 5

B. 0

C. undefined

D. Error: count is not a function

Solution

1. Step 1: Understand signal creation and update

   The signal count starts at 0, then set(5) changes its value to 5.

2. Step 2: Reading the signal value

   Calling count() returns the current value, which is 5 after the update.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   count.set(5) updates value, count() reads it [OK]

Hint: Use count() to read updated signal value [OK]

Common Mistakes:

• Thinking count() returns initial value
• Confusing set() with reading value
• Assuming count is not callable

4. Identify the error in this Angular signal code:

const name = signal('Alice');
name.update(name + ' Smith');

medium

A. Incorrect initial value type for signal

B. Missing parentheses when calling signal()

C. Using update() with a string instead of a function

D. Using set() instead of update()

Solution

1. Step 1: Understand update() usage

   update() expects a function that receives the current value and returns the new value.

2. Step 2: Analyze the code's argument to update()

   The code passes name + ' Smith' which is a string, not a function, causing an error.

3. Final Answer:

   Using update() with a string instead of a function -> Option C

4. Quick Check:

   update() needs a function argument [OK]

Hint: Pass a function to update(), not a direct value [OK]

Common Mistakes:

• Passing value directly to update()
• Confusing set() and update() usage
• Ignoring function argument requirement

5. You want to create a signal that holds a list of numbers and add a new number to it reactively. Which code correctly updates the signal to add number 7?

hard

A. numbers.push(7);

B. numbers.set(numbers() + 7);

C. numbers = signal([...numbers(), 7]);

D. numbers.update(list => [...list, 7]);

Solution

1. Step 1: Understand how to update array signals

   Signals hold values immutably; to add an item, create a new array with the old items plus the new one.

2. Step 2: Check each option's correctness

   numbers.update(list => [...list, 7]); uses update() with a function that returns a new array including 7, which is correct.
   numbers.set(numbers() + 7); tries to add 7 to an array directly, causing a type error.
   numbers = signal([...numbers(), 7]); tries to reassign the signal variable, which is incorrect.
   numbers.push(7); calls push() on the signal itself, which is not valid.

3. Final Answer:

   numbers.update(list => [...list, 7]); -> Option D

4. Quick Check:

   Use update() with function returning new array [OK]

Hint: Use update(fn) to immutably add items to array signals [OK]

Common Mistakes:

• Trying to mutate signal value directly
• Reassigning signal variable instead of updating
• Using set() with wrong value type