@Input decorator for parent to child in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be displayed by the child component?

Given the parent passes a value to the child using @Input, what will the child component render?

Angular

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

/* Parent component class */
export class ParentComponent {
  parentMessage = 'Hello from Parent';
}

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

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string = '';
}

A The child displays: undefined

B The child displays: '' (empty string)

C The child displays: Hello from Parent

D The child throws a runtime error

💡 Hint

Check how the @Input decorator passes data from parent to child.

The @Input decorator allows the child component to receive data from the parent. Here, the parent passes 'parentMessage' to the child's 'message' property, so the child displays 'Hello from Parent'.

📝 Syntax

intermediate

Which option correctly declares an @Input property in Angular?

Select the correct syntax to declare an @Input property named 'title' in a child component.

A @Input() title: string;

B input() title: string;

C @Input title: string;

D Input() title: string;

💡 Hint

Remember the exact decorator name and syntax in Angular.

The correct syntax uses the @Input() decorator imported from '@angular/core' followed by the property declaration. Only option A uses the correct decorator and syntax.

❓ state_output

advanced

What is the output when the parent changes the input value after initialization?

If the parent changes the value bound to the child's @Input property after the child is initialized, what will the child display?

Angular

/* Parent component template */
<app-child [count]="parentCount"></app-child>

/* Parent component class */
export class ParentComponent {
  parentCount = 1;

  increment() {
    this.parentCount++;
  }
}

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

@Component({
  selector: 'app-child',
  template: `<p>{{ count }}</p>`
})
export class ChildComponent {
  @Input() count: number = 0;
}

A The child displays undefined after the parent changes the value.

B The child displays the initial count value and does not update on parent changes.

C The child throws an error when the parent changes the input value.

D The child updates and displays the new count value each time the parent changes it.

💡 Hint

Consider how Angular's change detection updates @Input properties.

Angular automatically updates the child's @Input property when the parent changes the bound value. The child template reflects the updated value.

🔧 Debug

advanced

Why does the child component not receive the input value?

Given the code below, why does the child component display nothing even though the parent passes a value?

Angular

/* Parent template */
<app-child message="Hello"></app-child>

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

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string = '';
}

A The parent uses quotes instead of square brackets, so the child receives the literal string 'Hello' instead of a binding.

B The parent should use square brackets [message] to bind the value, otherwise the child gets a string literal.

C The child forgot to import the Input decorator.

D The child component's selector is incorrect.

💡 Hint

Check how Angular binds input properties in templates.

Without square brackets, Angular treats the value as a string literal, not a binding. To pass a variable or expression, square brackets are required.

🧠 Conceptual

expert

What happens if the @Input property name differs from the binding name in the parent template?

Consider the child component has @Input('aliasName') actualName: string; and the parent binds [aliasName]="value". What will happen?

Angular

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

@Component({
  selector: 'app-child',
  template: `<p>{{ actualName }}</p>`
})
export class ChildComponent {
  @Input('aliasName') actualName: string = '';
}

/* Parent template */
<app-child [aliasName]="parentValue"></app-child>

A The child receives the value bound to 'aliasName' and assigns it to 'actualName', displaying it correctly.

B The child ignores the input because the property name and binding name differ.

C Angular throws a compilation error due to mismatched input names.

D The child displays undefined because the binding name does not match the property name.

💡 Hint

Think about how @Input can rename input properties.

The string parameter in @Input('aliasName') tells Angular to bind the input property to 'aliasName' from the parent, even though the internal property is 'actualName'. This allows renaming inputs.

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