Input signals and model signals in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an input signal changes in Angular?

Consider an Angular standalone component that receives an input signal. What is the behavior when the input signal value changes?

Angular

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

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

A The component automatically updates the displayed count when the input signal changes.

B The component requires manual subscription to the signal to update the display.

C The component does not update because signals cannot be passed as inputs.

D The component updates only if a lifecycle hook manually triggers change detection.

💡 Hint

Think about how Angular signals propagate changes automatically.

Input signals in Angular automatically notify the component when their value changes, so the template updates reactively without manual subscriptions or lifecycle hooks.

❓ state_output

intermediate

What is the output of this Angular component using model signals?

Given the following Angular component code, what will be displayed after the button is clicked twice?

Angular

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

@Component({
  selector: 'app-clicker',
  standalone: true,
  template: `
    <p>Clicks: {{ clicks() }}</p>
    <button (click)="increment()">Click me</button>
  `
})
export class ClickerComponent {
  clicks = signal(0);

  increment() {
    this.clicks.update(c => c + 1);
  }
}

A Clicks: 0

B Clicks: undefined

C Clicks: 1

D Clicks: 2

💡 Hint

Each button click calls the increment method which updates the signal.

The signal 'clicks' starts at 0 and increments by 1 each time the button is clicked. After two clicks, it will be 2.

📝 Syntax

advanced

Which option correctly defines an input signal in Angular?

Choose the correct syntax to define an input signal property in an Angular standalone component.

A @Input() count = signal(0);

B @Input signal count = 0;

C @Input() count: Signal<number> = signal(0);

D count = @Input(signal(0));

💡 Hint

Remember to use the correct TypeScript type annotation and decorator syntax.

Option C correctly uses the @Input decorator with a typed Signal property initialized with signal(0). Option C misses the type annotation, B and C have invalid syntax.

🔧 Debug

advanced

Why does this Angular component fail to update when the input signal changes?

Examine the code below. The component receives an input signal but does not update the displayed value when the input changes. What is the cause?

Angular

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

@Component({
  selector: 'app-display',
  standalone: true,
  template: `
    <p>Value: {{ value() }}</p>
  `
})
export class DisplayComponent {
  @Input() value = signal(0);

  ngOnChanges() {
    // No code here
  }
}

A The input signal is reassigned instead of updated, breaking reactivity.

B The component does not import 'Signal' type, causing a runtime error.

C The template uses value() which is invalid syntax for signals.

D The component lacks a manual subscription to the input signal.

💡 Hint

Check how the input signal is handled and whether it is replaced or updated.

Reassigning the input signal breaks the reactive connection. The input signal should be passed and used directly without reassignment to keep updates working.

🧠 Conceptual

expert

How do model signals differ from input signals in Angular's reactive system?

Choose the statement that best describes the difference between model signals and input signals in Angular.

A Input signals are mutable inside the component, but model signals are read-only from outside.

B Model signals are owned and updated inside the component, while input signals come from outside and should not be mutated internally.

C Model signals and input signals are identical and interchangeable in Angular components.

D Input signals automatically trigger change detection, but model signals require manual triggering.

💡 Hint

Think about ownership and mutation rights of signals in component design.

Model signals are created and controlled inside the component and can be updated there. Input signals come from parent components and should be treated as read-only to avoid breaking unidirectional data flow.

Practice

1. What is the main purpose of Input signals in Angular components?

easy

A. To receive reactive data from parent components

B. To send events to parent components

C. To style the component dynamically

D. To handle user input events

Solution

1. Step 1: Understand Input signals role

   Input signals allow a component to get reactive data from its parent, keeping the data flow reactive and automatic.

2. Step 2: Differentiate from other options

   Sending events to parents is done by outputs, styling is unrelated, and user input events are handled differently.

3. Final Answer:

   To receive reactive data from parent components -> Option A

4. Quick Check:

   Input signals = receive reactive data [OK]

Hint: Input signals bring data in from parents [OK]

Common Mistakes:

• Confusing input signals with output events
• Thinking input signals handle styling
• Assuming input signals manage user events

2. Which of the following is the correct way to declare an input signal in an Angular standalone component?

easy

A. @Input() inputSignal = signal();

B. const inputSignal = signal();

C. const inputSignal = @Input(signal());

D. signal @Input() inputSignal;

Solution

1. Step 1: Recall Angular input signal syntax

   Input signals are declared with the @Input() decorator followed by a signal initialization.

2. Step 2: Check each option

   @Input() inputSignal = signal(); correctly uses @Input() decorator before the signal. const inputSignal = signal(); misses the decorator, C and D have invalid syntax.

3. Final Answer:

   @Input() inputSignal = signal(); -> Option A

4. Quick Check:

   Input signals need @Input() decorator [OK]

Hint: Use @Input() before signal declaration [OK]

Common Mistakes:

• Forgetting the @Input() decorator
• Placing @Input() incorrectly
• Using invalid syntax with signals

3. Given this Angular component code snippet:

export class MyComponent {
  @Input() count = signal(0);

  increment() {
    this.count.update(c => c + 1);
  }
}

What will be the value of count() after calling increment() twice if the initial value is 0?

medium

A. 0

B. 1

C. undefined

D. 2

Solution

1. Step 1: Understand initial signal value

   The signal count starts at 0.

2. Step 2: Apply increment method twice

   Each call to increment() updates the signal by adding 1, so after two calls: 0 + 1 + 1 = 2.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   0 + 2 increments = 2 [OK]

Hint: Each update adds 1 to the signal value [OK]

Common Mistakes:

• Thinking signals don't update automatically
• Confusing method calls with direct assignment
• Assuming initial value changes unexpectedly

4. Identify the error in this Angular component code using input signals:

export class SampleComponent {
  @Input() data = signal();

  ngOnInit() {
    this.data.set('Hello');
  }
}

medium

A. Input signals must be readonly

B. Missing initial value for signal()

C. ngOnInit() is not allowed in standalone components

D. Cannot call set() on input signals

Solution

1. Step 1: Check signal initialization

   The signal data is declared without an initial value, which is invalid.

2. Step 2: Understand signal requirements

   Signals must have an initial value when created, so signal() without arguments causes an error.

3. Final Answer:

   Missing initial value for signal() -> Option B

4. Quick Check:

   Signals need initial values [OK]

Hint: Always initialize signals with a value [OK]

Common Mistakes:

• Leaving signals uninitialized
• Thinking set() is disallowed on inputs
• Confusing lifecycle hooks usage

5. You want to create a component that receives a reactive input signal userName and also maintains a local model signal greeting that updates automatically when userName changes. Which approach correctly implements this behavior?

hard

A. Use @Input() userName: string; and create greeting = signal(''); updated by a setter

B. Use @Input() userName = signal(''); and update greeting manually in ngOnChanges

C. Use @Input() userName = signal(''); and inside the component create greeting = computed(() => `Hello, ${this.userName()}`);

D. Use @Input() userName = signal(''); and assign greeting = signal('Hello'); once in constructor

Solution

1. Step 1: Understand reactive input and model signals

   The input signal userName provides reactive data from parent. The local greeting should react automatically to changes.

2. Step 2: Use computed signal for automatic updates

   Using computed creates a signal that updates whenever userName() changes, keeping greeting in sync.

3. Final Answer:

   Use @Input() userName = signal(''); and greeting = computed(() => `Hello, ${this.userName()}`); -> Option C

4. Quick Check:

   Computed signals auto-update from input signals [OK]

Hint: Use computed() for dependent reactive signals [OK]

Common Mistakes:

• Manually updating signals instead of computed
• Using plain string input instead of signal
• Assigning greeting only once without reactivity