Signal creation and reading in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular signal example?

Consider this Angular standalone component using signals. What will be displayed in the browser?

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<p>Count: {{ count() }}</p>`
})
export class CounterComponent {
  count = signal(5);
}

A Count: 0

B Count: 5

C Count: undefined

D Error: signal is not a function

💡 Hint

Remember that signals hold a value and you read it by calling the signal as a function.

The signal is initialized with 5, and reading it with count() returns 5, so the template shows 'Count: 5'.

❓ state_output

intermediate

What is the value of the signal after this code runs?

Given this Angular code snippet, what is the final value of the signal 'name'?

Angular

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

const name = signal('Alice');
name.set('Bob');
name.update(current => current + ' Smith');

A 'Bob Smith'

B 'Alice Smith'

C 'Alice Bob Smith'

D 'Bob'

💡 Hint

The update function receives the current value and returns the new value.

First, the signal is set to 'Bob'. Then update appends ' Smith' to the current value 'Bob', resulting in 'Bob Smith'.

📝 Syntax

advanced

Which option correctly creates a signal and reads its value?

Choose the code snippet that correctly creates a signal with initial value 10 and reads its value into a variable 'currentValue'.

A

const count = signal(10);
const currentValue = count();

B

const count = new signal(10);
const currentValue = count();

C

const count = signal(10);
const currentValue = count.value;

D

const count = signal = 10;
const currentValue = count;

💡 Hint

Signals are functions to read their value, not objects with a 'value' property.

Option A correctly calls signal(10) to create and then calls count() to read the value. Others have syntax errors or wrong usage.

🔧 Debug

advanced

What error does this Angular signal code produce?

Analyze this code snippet. What error will Angular throw when running this?

Angular

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

const count = signal(0);
console.log(count.value);

A SyntaxError: Unexpected token '.'

B ReferenceError: signal is not defined

C TypeError: count.value is undefined

D No error, logs undefined

💡 Hint

Signals are functions, not objects with a 'value' property.

No error occurs. Signals do not have a 'value' property, so count.value is undefined, and console.log outputs 'undefined'.

🧠 Conceptual

expert

How does Angular's signal system improve component reactivity?

Which statement best explains how Angular signals improve reactivity compared to traditional state management?

A Signals store state in global variables accessible by all components.

B Signals require explicit event listeners to update components on state change.

C Signals automatically track dependencies and update only affected parts without manual subscriptions.

D Signals force full component re-render on any state change regardless of usage.

💡 Hint

Think about how signals track what uses their value and update selectively.

Angular signals track which parts of the UI use their value and update only those parts automatically, improving efficiency.