@Input decorator for parent to child in Angular

Introduction

The @Input decorator lets a parent component send data to its child component. It helps components share information easily.

When a parent component needs to pass a message or value to a child component.

When you want to customize a child component's display based on parent data.

When building reusable components that get data from their parent.

When you want to keep child components simple and controlled by the parent.

Syntax

Angular

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

@Component({
  selector: 'child-component',
  template: `{{ data }}`
})
export class ChildComponent {
  @Input() data: string = '';
}

The @Input() decorator marks a property to receive data from the parent.

The property name inside @Input() is optional if it matches the parent binding name.

Examples

Basic example where title receives a string from the parent.

Angular

export class ChildComponent {
  @Input() title: string = '';
}

Here, the parent passes data using parentName, but the child uses childName internally.

Angular

export class ChildComponent {
  @Input('parentName') childName: string = '';
}

Sample Program

The parent component AppComponent passes the string parentMessage to the child component ChildComponent using the @Input property message. The child displays this message.

Angular

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

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

@Component({
  selector: 'app-root',
  template: `<child-comp [message]="parentMessage"></child-comp>`
})
export class AppComponent {
  parentMessage = 'Hello from Parent!';
}

Important Notes

Always initialize @Input properties to avoid undefined errors.

Changes to the input property update the child view automatically.

Use @Input only for data coming from the parent, not for child internal state.

Summary

@Input lets a child component receive data from its parent.

Use it to make components communicate and share data easily.

It keeps components reusable and controlled by their parents.

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