@Input decorator for parent to child in Angular - Step-by-Step Execution

Concept Flow - @Input decorator for parent to child

Parent Component

↓

Child Component with @Input

↓

Child uses data in template or logic

The parent component sends data to the child component using the @Input decorator, allowing the child to receive and use that data.

Execution Sample

Angular

/* Parent template */
<child-comp [message]="parentMessage"></child-comp>

/* Child component */
import { Input } from '@angular/core';

@Input() message: string;

Parent passes 'parentMessage' string to child via 'message' input property.

Execution Table

Step	Action	Parent Data	Child @Input Property	Result in Child
1	Parent sets parentMessage = 'Hello Child'	Hello Child	undefined	undefined
2	Parent template binds [message] to parentMessage	Hello Child	undefined	undefined
3	Angular passes parentMessage to child's @Input message	Hello Child	Hello Child	Hello Child
4	Child template renders message	Hello Child	Hello Child	Displays 'Hello Child'
5	Parent changes parentMessage to 'New Message'	New Message	Hello Child	Hello Child
6	Angular updates child's @Input message to 'New Message'	New Message	New Message	Displays 'New Message'

💡 Data flow stops when parent stops changing the bound property.

Variable Tracker

Variable	Start	After Step 3	After Step 6
parentMessage	undefined	Hello Child	New Message
message (child @Input)	undefined	Hello Child	New Message

Key Moments - 2 Insights

Why does the child component's @Input property update when the parent data changes?

Because Angular's binding system automatically passes the updated parent property to the child's @Input property, as shown in steps 5 and 6 of the execution_table.

Can the child component change the value of the @Input property directly?

No, the @Input property is controlled by the parent. The child can read it but should not modify it directly to avoid data inconsistency.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'message' in the child after step 3?

A "New Message"

B "undefined"

C "Hello Child"

D "parentMessage"

💡 Hint

Check the 'Child @Input Property' column at step 3 in the execution_table.

At which step does the child component first display the message from the parent?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Result in Child' column to see when the message is displayed.

If the parent never changes 'parentMessage', what happens to the child's @Input property?

A It updates continuously

B It remains the initial value passed

C It becomes undefined

D It causes an error

💡 Hint

Refer to the exit_note and variable_tracker for how data flows when parent data is static.

Concept Snapshot

@Input decorator allows a parent component to pass data to a child component.
Parent binds a property to the child's input property using [inputName]="parentProperty" syntax.
Angular updates the child's @Input property whenever the parent property changes.
Child can use this data in its template or logic but should not modify it.
This enables clear, one-way data flow from parent to child.

Full Transcript

In Angular, the @Input decorator marks a property in the child component to receive data from its parent. The parent component passes data by binding a property in its template to the child's input property using square brackets. When the parent property changes, Angular automatically updates the child's @Input property. The child component can then use this data in its template or logic. This flow is one-way: from parent to child. The child should not modify the input property directly to keep data consistent. This mechanism helps components communicate clearly and keeps data flow predictable.