@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.

Practice

1. What is the main purpose of the @Input decorator in Angular?

easy

A. To define a route in Angular

B. To send data from a child component to its parent component

C. To create a new Angular service

D. To allow a child component to receive data from its parent component

Solution

1. Step 1: Understand the role of @Input

   The @Input decorator is used to mark a property in a child component that can receive data from its parent.

2. Step 2: Compare options with the concept

   Only To allow a child component to receive data from its parent component correctly describes this data flow from parent to child. Options B, C, and D describe other unrelated Angular features.

3. Final Answer:

   To allow a child component to receive data from its parent component -> Option D

4. Quick Check:

   @Input passes data parent to child [OK]

Hint: Remember: @Input means data flows into child [OK]

Common Mistakes:

• Confusing @Input with @Output
• Thinking @Input sends data up to parent
• Mixing @Input with services or routing

2. Which of the following is the correct syntax to declare an @Input property named title in a child component?

easy

A. input title: string;

B. @Input() title: string;

C. @Output() title: string;

D. Input() title: string;

Solution

1. Step 1: Recall correct @Input syntax

   In Angular, to declare an input property, you use @Input() decorator before the property declaration.

2. Step 2: Check each option

   @Input() title: string; correctly uses @Input() with the property name and type. Options A and D miss the decorator syntax, and C uses @Output() which is for event emitters, not inputs.

3. Final Answer:

   @Input() title: string; -> Option B

4. Quick Check:

   Decorator syntax is @Input() [OK]

Hint: Always use @Input() decorator before property [OK]

Common Mistakes:

• Using @Output instead of @Input
• Forgetting parentheses after @Input
• Writing 'input' lowercase without decorator

3. Given the child component code:

@Component({ selector: 'child-comp', template: '{{name}}' })
export class ChildComponent {
  @Input() name!: string;
}

And the parent template:

<child-comp [name]="parentName"></child-comp>

If parentName = 'Angular', what will the child component display?

medium

A. Angular

B. parentName

C. {{name}}

D. Error: name not defined

Solution

1. Step 1: Understand data flow from parent to child

   The parent passes the string 'Angular' to the child's name property using property binding [name].

2. Step 2: Check child template rendering

   The child template displays {{name}}, which will be replaced by the value passed, 'Angular'.

3. Final Answer:

   Angular -> Option A

4. Quick Check:

   Parent value passed to child input = displayed text [OK]

Hint: Property binding passes parent data to child's @Input [OK]

Common Mistakes:

• Thinking the literal string 'parentName' is displayed
• Expecting template syntax {{name}} to show literally
• Assuming error because of missing initialization

4. Consider this child component code:

@Component({ selector: 'child-comp', template: '{{data}}' })
export class ChildComponent {
  @Input() data: string;
}

And parent template:

<child-comp data="parentData"></child-comp>

What is the problem here?

medium

A. The child property data must be initialized with a default value

B. The child component must use @Output instead of @Input

C. The parent should use property binding with square brackets: [data]

D. The parent should pass data using interpolation: {{parentData}}

Solution

1. Step 1: Identify how parent passes data to child input

   To pass a variable value from parent to child, Angular requires property binding syntax with square brackets, e.g., [data].

2. Step 2: Analyze the given parent template

   The parent uses data="parentData" without brackets, which passes the literal string 'parentData', not the variable's value.

3. Final Answer:

   The parent should use property binding with square brackets: [data] -> Option C

4. Quick Check:

   Use [inputProp] to pass variables [OK]

Hint: Use square brackets to bind variables to @Input [OK]

Common Mistakes:

• Passing variable names as strings without brackets
• Confusing @Input with @Output
• Thinking default initialization fixes binding errors

5. You have a parent component with a property user = {name: 'Alice', age: 30}. You want to pass only the name to a child component using @Input. Which is the best way to do this in the parent template?

hard

A. <child-comp [userName]="user.name"></child-comp>

B. <child-comp [userName]="user"></child-comp>

C. <child-comp userName="user.name"></child-comp>

D. <child-comp [userName]="user['age']"></child-comp>

Solution

1. Step 1: Understand the data to pass

   The parent wants to pass only the name property from the user object, not the whole object.

2. Step 2: Check each option for correct binding

   <child-comp [userName]="user.name"></child-comp> correctly binds user.name to the child's userName input. <child-comp [userName]="user"></child-comp> passes the whole object, not just the name. <child-comp userName="user.name"></child-comp> passes the string literal 'user.name' instead of the value. <child-comp [userName]="user['age']"></child-comp> passes the age, not the name.

3. Final Answer:

   <child-comp [userName]="user.name"></child-comp> -> Option A

4. Quick Check:

   Bind exact property with [inputProp]="object.prop" [OK]

Hint: Bind specific property with [inputProp]="object.prop" [OK]

Common Mistakes:

• Passing whole object instead of specific property
• Using quotes without brackets causing string literal
• Passing wrong property like age instead of name