0
0
Angularframework~20 mins

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

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Angular Input Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
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 = '';
}
AThe child displays: undefined
BThe child displays: '' (empty string)
CThe child displays: Hello from Parent
DThe child throws a runtime error
Attempts:
2 left
💡 Hint
Check how the @Input decorator passes data from parent to child.
📝 Syntax
intermediate
1:30remaining
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;
Binput() title: string;
C@Input title: string;
DInput() title: string;
Attempts:
2 left
💡 Hint
Remember the exact decorator name and syntax in Angular.
❓ state_output
advanced
2:30remaining
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;
}
AThe child displays undefined after the parent changes the value.
BThe child displays the initial count value and does not update on parent changes.
CThe child throws an error when the parent changes the input value.
DThe child updates and displays the new count value each time the parent changes it.
Attempts:
2 left
💡 Hint
Consider how Angular's change detection updates @Input properties.
🔧 Debug
advanced
2:30remaining
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 = '';
}
AThe parent uses quotes instead of square brackets, so the child receives the literal string 'Hello' instead of a binding.
BThe parent should use square brackets [message] to bind the value, otherwise the child gets a string literal.
CThe child forgot to import the Input decorator.
DThe child component's selector is incorrect.
Attempts:
2 left
💡 Hint
Check how Angular binds input properties in templates.
🧠 Conceptual
expert
3:00remaining
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>
AThe child receives the value bound to 'aliasName' and assigns it to 'actualName', displaying it correctly.
BThe child ignores the input because the property name and binding name differ.
CAngular throws a compilation error due to mismatched input names.
DThe child displays undefined because the binding name does not match the property name.
Attempts:
2 left
💡 Hint
Think about how @Input can rename input properties.