[Solved] Examine this child component code:@Component({ selector: 'child-comp', template:... }And the parent template:<child-comp [data]="parentData"></child-comp>What is the issue with this setup? | Angular

Angular - Component Interaction

Examine this child component code:

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

And the parent template:

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

What is the issue with this setup?

AThe child property 'data' lacks the @Input decorator, so it won't receive data from the parent.

BThe parent should use parentheses instead of square brackets for binding.

CThe child component's selector is incorrect.

DThe child template syntax '{{data}}' is invalid.

Step-by-Step Solution

Solution:

Step 1: Check property declaration
The child property data is declared without @Input.
Step 2: Effect on binding
Without @Input, Angular does not bind the parent's parentData to the child's data.
Final Answer:
The child property 'data' lacks the @Input decorator, so it won't receive data from the parent. -> Option A
Quick Check:
@Input decorator required for input binding [OK]

Quick Trick: Always add @Input to receive parent data [OK]

Common Mistakes:

Master "Component Interaction" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Examine this child component code: