Input signals and model signals in Angular - Step-by-Step Execution

Concept Flow - Input signals and model signals

Parent Component

↓

Child Component

↓

Child Model Signal

↓

Child Component

↓

Parent Component

↓

Parent Model

The parent sends input signals to the child. The child updates its model and emits signals back. The parent listens and updates accordingly.

Execution Sample

Angular

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

@Component({
  selector: 'child-comp',
  standalone: true,
  template: `<p>{{ model() }}</p>`
})
export class ChildComponent {
  @Input() model = signal('');
}

A child component receives a model signal as input and displays its value.

Execution Table

Step	Action	Input Signal Value	Model Signal Value	Output/Effect
1	Parent sets input signal to 'Hello'	Hello	'' (initial)	Child receives 'Hello' as input
2	Child model signal updates to input value	Hello	Hello	Child displays 'Hello'
3	Child emits model signal change	Hello	Hello	Parent listens and updates its model
4	Parent updates model signal to 'Hello'	Hello	Hello	Parent model updated
5	Parent changes input signal to 'World'	World	Hello	Child receives new input 'World'
6	Child model signal updates to 'World'	World	World	Child displays 'World'
7	Child emits model signal change	World	World	Parent listens and updates its model
8	Parent updates model signal to 'World'	World	World	Parent model updated
9	No further changes	World	World	Execution stops
10	Exit	N/A	N/A	No more input changes

💡 No more input changes; signals stabilized

Variable Tracker

Variable	Start	After 1	After 2	After 5	After 6	Final
Input Signal	''	'Hello'	'Hello'	'World'	'World'	'World'
Model Signal	''	''	'Hello'	'Hello'	'World'	'World'

Key Moments - 2 Insights

Why does the child model signal update after the input signal changes?

Because the child listens to the input signal and updates its model signal accordingly, as shown in execution_table rows 2 and 6.

How does the parent know when to update its model signal?

The child emits a model signal change event that the parent listens to, triggering the update, as seen in rows 3 and 7.

Visual Quiz - 3 Questions

Look at the execution table, what is the model signal value at step 2?

A 'World'

B '' (empty string)

C 'Hello'

D undefined

💡 Hint

Check the 'Model Signal Value' column at step 2 in the execution_table.

At which step does the input signal change from 'Hello' to 'World'?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look at the 'Input Signal Value' column in the execution_table.

If the parent never updates the input signal, what happens to the model signal?

A It stays the same as the initial value

B It updates automatically to 'World'

C It updates to 'Hello'

D It becomes undefined

💡 Hint

Refer to variable_tracker and execution_table exit_note about signal stabilization.

Concept Snapshot

Input signals flow from parent to child components.
Child components receive input signals and update their model signals.
Model signals can emit changes back to the parent.
Parent listens and updates its own model accordingly.
This creates a reactive data flow between parent and child.
Signals keep UI in sync without manual event handling.

Full Transcript

In Angular, input signals are passed from a parent component to a child component. The child receives these signals and updates its internal model signals accordingly. When the child model signal changes, it emits a signal back to the parent. The parent listens to these emitted signals and updates its own model. This cycle keeps the data synchronized between parent and child components. The execution table shows how the input signal changes from empty to 'Hello' and then to 'World', and how the model signal updates in response. The variable tracker records these changes step-by-step. Key moments clarify why the child updates its model after input changes and how the parent listens to child signals. The visual quiz tests understanding of signal values at specific steps and the effect of no input changes. This reactive pattern simplifies data flow and UI updates in Angular applications.

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