@Input decorator for parent to child in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the decorator needed to receive data from a parent component.

Angular

import { [1] } from '@angular/core';

Drag options to blanks, or click blank then click option'

AComponent

BInput

COutput

DInjectable

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Output instead of @Input

Forgetting to import the decorator

Importing from the wrong Angular package

The @Input decorator is imported from '@angular/core' to allow a child component to receive data from its parent.

2fill in blank

medium

Complete the code to declare an input property named 'title' in the child component.

Angular

@Input() [1]: string;

Drag options to blanks, or click blank then click option'

Aname

Bvalue

Cdata

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different property name than expected

Not declaring the property type

Forgetting the @Input decorator

The property decorated with @Input() must match the name used to receive data from the parent. Here, 'title' is the input property.

3fill in blank

hard

Fix the error in the child component to correctly receive the input property 'count'.

Angular

export class ChildComponent {
  [1] count: number;
}

Drag options to blanks, or click blank then click option'

A@Input()

B@Inject()

C@Output()

D@ViewChild()

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Output instead of @Input

Using @Inject which is for dependency injection

Using @ViewChild which is for accessing child elements

To receive data from the parent, the property must be decorated with @Input().

4fill in blank

hard

Fill both blanks to define an input property 'userName' with an alias 'name' in the child component.

Angular

@Input('[1]') [2]: string;

Drag options to blanks, or click blank then click option'

Aname

BuserName

Cuser

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same name for alias and property

Forgetting to put the alias string in quotes

Mixing up property and alias names

The alias 'name' is used in the @Input decorator, while the property name is 'userName'. This allows the parent to bind using 'name'.

5fill in blank

hard

Fill all three blanks to create a child component that receives 'age' as input and uses it in the template.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Age: [2]</p>`
})
export class ChildComponent {
  @Input() [3]: number;
}

Drag options to blanks, or click blank then click option'

AInput

Bage

CageValue

DOutput

Attempts:

3 left

💡 Hint

Common Mistakes

Importing @Output instead of @Input

Using different names in property and template

Forgetting to decorate the property

The @Input decorator is imported, the property name is 'age', and the template uses 'age' to display the value.

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