@Input decorator for parent to child in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @Input decorator in Angular?

The @Input decorator allows a parent component to pass data to its child component. It marks a property in the child component as a target for receiving input values from the parent.

beginner

How do you use the @Input decorator in a child component?

You import <code>@Input</code> from <code>@angular/core</code> and add it before a property declaration in the child component class. This property will then receive data from the parent component's template.

intermediate

Can the @Input property name be different from the attribute name used in the parent template?

Yes. You can provide an alias inside the @Input decorator like @Input('aliasName'). The parent uses the alias name in its template, while the child uses the property name internally.

beginner

What happens if the parent does not provide a value for an @Input property?

The @Input property in the child component will be undefined unless it has a default value set in the child component class.

intermediate

Why is the @Input decorator important for component communication?

It enables clear, one-way data flow from parent to child components, making the app easier to understand and maintain by separating concerns and avoiding direct manipulation of child internals.

What does the @Input decorator do in Angular?

A Allows a parent to send data to a child component

B Sends data from child to parent

C Defines a service for dependency injection

D Creates a new Angular module

The @Input decorator marks a property in the child component to receive data from the parent.

How do you import the @Input decorator?

A import { Input } from '@angular/common';

B import { Input } from '@angular/forms';

C import { Input } from '@angular/core';

D import { Input } from '@angular/router';

The @Input decorator is imported from @angular/core.

If you want to use a different name for the input property in the parent template, what do you do?

A Change the property name in the parent component class

B Use <code>@Input('aliasName')</code> in the child component

C Use <code>@Output</code> instead

D Rename the child component selector

You can provide an alias name inside the @Input decorator to use a different attribute name in the parent template.

What will be the value of an @Input property if the parent does not bind any value?

A Zero

B null automatically

C An empty string

D undefined unless a default is set

If the parent does not provide a value, the @Input property is undefined unless the child sets a default.

Which direction does data flow when using @Input?

A From parent to child

B From child to parent

C Between sibling components

D From service to component

@Input is used for one-way data flow from parent component to child component.

Explain how the @Input decorator works to pass data from a parent to a child component in Angular.

Think about how the parent template uses the child selector with property binding.

Describe a scenario where you would use an alias with the @Input decorator and how to implement it.

This helps when you want clearer or different naming in the parent template.

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