Computed signals for derived values in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular computed signal example?

Consider this Angular standalone component using signals and computed signals. What will be displayed inside the paragraph?

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<p>{{ fullName() }}</p>`
})
export class AppComponent {
  firstName = signal('Jane');
  lastName = signal('Doe');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
}

A Error: fullName is not a function

B Jane Doe

C Doe

D Jane

💡 Hint

Remember that computed signals are functions that return the derived value.

The computed signal fullName combines firstName and lastName signals. Calling fullName() returns the concatenated string 'Jane Doe'.

❓ state_output

intermediate

What is the value of 'fullName' after updating signals?

Given this Angular component, what is the value returned by fullName() after the lastName signal is updated?

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `{{ fullName() }}`
})
export class AppComponent {
  firstName = signal('John');
  lastName = signal('Smith');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    this.lastName.set('Brown');
  }
}

A John Brown

B John Smith

C Brown

D John

💡 Hint

Signals update reactively, so computed signals reflect the latest values.

The lastName signal is updated to 'Brown' in the constructor. The computed fullName reflects this change and returns 'John Brown'.

📝 Syntax

advanced

Which option correctly defines a computed signal for the sum of two signals?

You want to create a computed signal that returns the sum of two number signals: countA and countB. Which code snippet is correct?

A sum = computed(() => countA() + countB);

B sum = computed(() => countA + countB);

C sum = computed(() => this.countA() + this.countB());

D sum = computed(() => this.countA + this.countB());

💡 Hint

Remember to call signals as functions to get their current values.

Signals are functions. To get their values inside computed, you must call them with (). Option C correctly calls both signals.

🔧 Debug

advanced

Why does this computed signal not update when signals change?

Look at this Angular component code. Why does fullName not update when firstName or lastName change?

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `{{ fullName() }}`
})
export class AppComponent {
  firstName = signal('Alice');
  lastName = signal('Wonderland');
  fullName = computed(() => this.firstName + ' ' + this.lastName);

  constructor() {
    this.firstName.set('Bob');
  }
}

A Because fullName is missing a return statement.

B Because signals cannot be used inside computed signals.

C Because the constructor updates firstName before fullName is defined.

D Because signals are not called as functions inside computed, so dependencies are not tracked.

💡 Hint

Check how signals are accessed inside the computed function.

Signals must be called as functions to track dependencies. Using this.firstName without () returns the signal object, not its value, so computed does not update.

🧠 Conceptual

expert

What happens if a computed signal depends on another computed signal that throws an error?

In Angular signals, if computed signal A depends on computed signal B, and B throws an error during evaluation, what is the behavior of A when accessed?

A Accessing A will also throw the same error because it depends on B.

B A will return undefined silently without throwing an error.

C A will cache the last successful value and not throw an error.

D A will ignore B's error and return a default value.

💡 Hint

Think about how errors propagate in reactive computed chains.

If a computed signal throws an error, any computed signal depending on it will also throw that error when accessed, propagating the failure.