Signal-based components in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a signal with initial value 0.

Angular

const count = signal([1]);

Drag options to blanks, or click blank then click option'

A0

B''

Cundefined

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as initial value causes unexpected behavior.

Leaving the initial value empty causes errors.

The signal function creates a reactive value. Here, initializing it with 0 sets the starting count.

2fill in blank

medium

Complete the code to update the signal value by adding 1.

Angular

count.set(count.[1]() + 1);

Drag options to blanks, or click blank then click option'

Aread

Bvalue

Ccurrent

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using value property which does not exist.

Using read or current which are invalid.

The get() method reads the current value of a signal.

3fill in blank

hard

Fix the error in the component to inject the signal correctly.

Angular

import { Component, [1] } from '@angular/core';

Drag options to blanks, or click blank then click option'

AinjectSignal

Binject

CuseSignal

DsignalInject

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent functions like injectSignal or signalInject.

Confusing with hooks or other framework methods.

The inject function is used to inject dependencies in Angular standalone components.

4fill in blank

hard

Fill both blanks to create a signal and update it on button click.

Angular

const clicks = [1](0);

function onClick() {
  clicks.[2](clicks.get() + 1);
}

Drag options to blanks, or click blank then click option'

Asignal

Bset

Cupdate

DcreateSignal

Attempts:

3 left

💡 Hint

Common Mistakes

Using update instead of set to change signal value.

Using createSignal which is not an Angular function.

signal creates the reactive value, and set updates it.

5fill in blank

hard

Fill all three blanks to create a standalone component with a signal and display its value.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Clicked [2] times</button>`
})
export class CounterComponent {
  count = [3](0);

  increment() {
    this.count.set(this.count.get() + 1);
  }
}

Drag options to blanks, or click blank then click option'

Asignal

Bcount

Dinject

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing import names or variable names.

Not matching the variable name in template and class.

signal is imported from '@angular/core', count is the signal variable used in the template, and signal creates the reactive value.

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