Signal creation and reading in Angular - Mini Project: Build & Apply

Signal creation and reading

📖 Scenario: You are building a simple Angular app that tracks a user's favorite fruit. You want to use Angular signals to store and read the favorite fruit value reactively.

🎯 Goal: Create an Angular standalone component that uses a signal to hold a favorite fruit string. Display the fruit in the template by reading the signal.

📋 What You'll Learn

Create a signal to hold the favorite fruit string

Initialize the signal with the value 'Apple'

Read the signal value in the template using the signal's function call syntax

Use Angular standalone component syntax

💡 Why This Matters

🌍 Real World

Signals in Angular help build reactive user interfaces that update automatically when data changes, like showing user preferences or live data.

💼 Career

Understanding Angular signals is important for modern Angular development jobs, as signals improve performance and simplify state management.

1

Create the favorite fruit signal

In the AppComponent, import signal from @angular/core. Then create a signal called favoriteFruit and initialize it with the string 'Apple'.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: ``,
})
export class AppComponent {
  // Create the favoriteFruit signal here
}

Hint

Use signal('Apple') to create the signal holding the string 'Apple'.

2

Add a template to display the favorite fruit

In the @Component decorator, add a template that shows the text Favorite fruit: followed by the value of the favoriteFruit signal. Use the signal's function call syntax favoriteFruit() to read its value.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
  `,
})
export class AppComponent {
  favoriteFruit = signal('Apple');
}

Hint

Use interpolation with {{ favoriteFruit() }} inside the template string.

3

Add a method to update the favorite fruit

Inside AppComponent, add a method called changeFruit that takes a string parameter newFruit and updates the favoriteFruit signal with this new value using the set method.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    Favorite fruit: {{ favoriteFruit() }}
  `,
})
export class AppComponent {
  favoriteFruit = signal('Apple');

  // Add changeFruit method here
}

Hint

Use this.favoriteFruit.set(newFruit) inside the method to update the signal.

4

Add buttons to change the favorite fruit

Update the template to add two buttons labeled Banana and Cherry. When clicked, each button should call the changeFruit method with the respective fruit name string. Use Angular's (click) event binding.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    Favorite fruit: {{ favoriteFruit() }}
    
  `,
})
export class AppComponent {
  favoriteFruit = signal('Apple');

  changeFruit(newFruit: string) {
    this.favoriteFruit.set(newFruit);
  }
}

Hint

Use (click)="changeFruit('Banana')" and similarly for Cherry on the buttons.

Practice

1. What does the signal function do in Angular?

easy

A. Registers a service for dependency injection

B. Defines a new Angular component

C. Creates a reactive value that can be read and updated

D. Starts an HTTP request

Solution

1. Step 1: Understand the purpose of signal

   The signal function is used to create reactive values that Angular tracks for changes.

2. Step 2: Identify what signal does

   It creates a value container that can be read by calling it and updated to trigger UI changes.

3. Final Answer:

   Creates a reactive value that can be read and updated -> Option C

4. Quick Check:

   Signal creation = reactive value container [OK]

Hint: Remember: signal() creates reactive values you can read and update [OK]

Common Mistakes:

• Confusing signal with component or service creation
• Thinking signal starts HTTP requests
• Assuming signal is for styling or templates

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

easy

A. const count = signal(10);

B. const count = Signal(10);

C. const count = signal = 10;

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

Solution

1. Step 1: Check the correct syntax for signal creation

   The correct syntax uses lowercase signal as a function with the initial value in parentheses.

2. Step 2: Compare options

   const count = signal(10); matches the correct syntax: const count = signal(10);. Others use wrong casing or invalid syntax.

3. Final Answer:

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

4. Quick Check:

   signal() function call with initial value [OK]

Hint: Use lowercase signal() with parentheses for initial value [OK]

Common Mistakes:

• Using uppercase Signal instead of signal
• Assigning signal = 10 instead of calling signal(10)
• Trying to call a create method on signal

3. Given this code:

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

What will be printed in the console?

medium

A. 5 then 10

B. 5 then 5

C. 10 then 10

D. Error because set() is not a function

Solution

1. Step 1: Read the initial signal value

   The signal count is created with initial value 5, so count() returns 5.

2. Step 2: Update the signal and read again

   Calling count.set(10) updates the value to 10, so the next count() returns 10.

3. Final Answer:

   5 then 10 -> Option A

4. Quick Check:

   Signal read before and after set() = 5, 10 [OK]

Hint: Remember: signal() reads, set() updates value [OK]

Common Mistakes:

• Thinking count() returns the same value after set()
• Assuming set() is not a valid method
• Confusing signal reading with direct variable access

4. Identify the error in this code snippet:

const name = signal('Alice');
console.log(name);
name('Bob');

medium

A. Cannot call signal variable as a function

B. Missing parentheses when reading signal value

C. Cannot assign new value by calling signal as function

D. Signal must be updated using name.set('Bob')

Solution

1. Step 1: Check how signal values are read and updated

   Signals are read by calling them as functions: name(). To update, use name.set(newValue).

2. Step 2: Identify the error in updating

   The code tries to update the signal by calling name('Bob'), which is invalid. The correct way is name.set('Bob').

3. Final Answer:

   Signal must be updated using name.set('Bob') -> Option D

4. Quick Check:

   Update signals with set() method [OK]

Hint: Use set() to update signals, not calling them as functions [OK]

Common Mistakes:

• Trying to update signal by calling it as a function
• Forgetting parentheses when reading signal value
• Confusing signal with normal variables

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

const numbers = signal([1, 2, 3]);
// Add 4 to numbers here

hard

A. numbers([...numbers(), 4]);

B. numbers.set([...numbers(), 4]);

C. numbers.value.push(4);

D. numbers = [...numbers(), 4];

Solution

1. Step 1: Understand how to read and update signals

   Read the current value by calling numbers(). To update, use numbers.set(newValue).

2. Step 2: Add 4 to the existing array immutably

   Create a new array with existing values plus 4: [...numbers(), 4]. Then update signal with numbers.set([...numbers(), 4]).

3. Final Answer:

   numbers.set([...numbers(), 4]); -> Option B

4. Quick Check:

   Update signal immutably with set([...signal(), newItem]) [OK]

Hint: Use set() with new array copy to update list signals [OK]

Common Mistakes:

• Trying to call signal as a function to update
• Mutating array directly without set()
• Assigning new array to signal variable directly