Signal-based components in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular signal-based component?

Consider this Angular standalone component using signals. What will be displayed when the component renders?

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Increment</button><p>Count: {{ count() }}</p>`
})
export class CounterComponent {
  count = signal(0);
  increment() {
    this.count.update(c => c + 1);
  }
}

A A button labeled 'Increment' and a paragraph showing 'Count: 0' but does not update on clicks.

B A button labeled 'Increment' but no count is displayed.

C A button labeled 'Increment' and a paragraph showing 'Count: 1' initially, increasing by 1 each click.

D A button labeled 'Increment' and a paragraph showing 'Count: 0' initially, increasing by 1 each click.

💡 Hint

Remember that signals hold reactive values and the template calls the signal as a function to get the current value.

The signal count starts at 0. The template calls count() to get the current value. Clicking the button calls increment(), which updates the signal by adding 1. The displayed count updates reactively.

❓ state_output

intermediate

What is the value of the signal after these updates?

Given this Angular component using signals, what is the final value of status() after the code runs?

Angular

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

@Component({
  selector: 'app-status',
  standalone: true,
  template: `<p>Status: {{ status() }}</p>`
})
export class StatusComponent {
  status = signal('idle');

  constructor() {
    this.status.set('loading');
    this.status.update(s => s + '...');
    this.status.set('done');
  }
}

A 'done'

B 'loading...'

C 'idle'

D 'done...'

💡 Hint

Signals update immediately when set or updated. The last set call determines the final value.

The signal status starts as 'idle'. It is set to 'loading', then updated to 'loading...', then finally set to 'done'. The last set call overwrites previous values, so the final value is 'done'.

📝 Syntax

advanced

Which option causes a syntax error in signal usage?

Identify which code snippet will cause a syntax error when defining or updating a signal in Angular.

A

const count = signal(0);
count.update(c => c + 1);

B

const count = signal(0);
count.set(count + 1);

C

const count = signal(0);
count.update(c => c + 1); count.set(5);

D

const count = signal(0)
count.update(c => c + 1);

💡 Hint

Remember that set expects a value, not a signal function or signal itself.

Option B tries to set the signal to count + 1, but count is a signal function, not a number. This causes a type error, which is a syntax misuse here.

🔧 Debug

advanced

Why does this signal not update the template?

Given this Angular component, why does the displayed count not update when the button is clicked?

Angular

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

@Component({
  selector: 'app-broken-counter',
  standalone: true,
  template: `<button (click)="increment()">Increment</button><p>Count: {{ count }}</p>`
})
export class BrokenCounterComponent {
  count = signal(0);
  increment() {
    this.count.update(c => c + 1);
  }
}

A The template uses {{ count }} instead of calling the signal as a function {{ count() }}.

B The signal is not initialized properly with signal(0).

C The increment method does not update the signal correctly.

D The component is missing the @Injectable decorator.

💡 Hint

Signals must be called as functions in templates to get their current value.

The template uses {{ count }} which prints the signal function itself, not its value. It should use {{ count() }} to get the current value and update reactively.

🧠 Conceptual

expert

What happens if you update a signal inside a signal's computed function?

Consider this Angular code snippet using signals and computed signals. What will happen when the component initializes?

Angular

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

@Component({
  selector: 'app-loop',
  standalone: true,
  template: `<p>Value: {{ value() }}</p>`
})
export class LoopComponent {
  count = signal(0);
  value = computed(() => {
    if (this.count() < 3) {
      this.count.update(c => c + 1);
    }
    return this.count();
  });
}

A The component will render 'Value: 0' because updates inside computed are ignored.

B The component will render 'Value: 3' after incrementing count three times without errors.

C The component will cause a runtime error due to infinite signal update loop.

D The component will render 'Value: 1' and stop updating.

💡 Hint

Signals and computed functions should not cause side effects like updating signals inside computed.

Updating a signal inside a computed signal causes the computed to re-run, which triggers another update, creating an infinite loop and runtime error.