@Input decorator for parent to child in Angular - Mini Project: Build & Apply

Passing Data from Parent to Child with @Input Decorator in Angular

📖 Scenario: You are building a simple Angular app where a parent component sends a message to its child component. This is common when you want to reuse a child component but show different data inside it.

🎯 Goal: Build two Angular components: a parent and a child. The parent will pass a string message to the child using the @Input decorator. The child will display this message in its template.

📋 What You'll Learn

Create a child component with an @Input property called message of type string

Create a parent component that uses the child component selector in its template

Pass a string value from the parent component to the child component using property binding

Display the passed message inside the child component's template

💡 Why This Matters

🌍 Real World

Passing data from parent to child components is a common pattern in Angular apps to build reusable and dynamic UI parts.

💼 Career

Understanding @Input is essential for Angular developers to create modular components and manage data flow in applications.

1

Create the child component with a message property

Create a child component class called ChildComponent with a public string property called message. Do not add the @Input decorator yet.

Angular

export class ChildComponent {
  // Your code here
}

Hint

Define a class with a string property named message initialized to an empty string.

2

Add the @Input decorator to the message property

Import @Input from @angular/core and add the @Input() decorator above the message property in ChildComponent.

Angular

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

export class ChildComponent {
  // Add @Input decorator here
  message: string = '';
}

Hint

Use @Input() to mark the message property as input from the parent.

3

Create the parent component and pass a message to the child

Create a parent component class called ParentComponent with a public string property called parentMessage set to 'Hello from Parent'. In the parent component's template, use the child component selector <app-child> and bind parentMessage to the child's message input property.

Angular

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

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

export class ParentComponent {
  // Your code here
}

// In the parent template:
// 

Hint

Define parentMessage in the parent class and bind it to the child's message input in the template.

4

Display the message inside the child component template

In the child component's template, add interpolation to display the message property inside a paragraph tag.

Angular

Hint

Use Angular interpolation syntax {{ message }} inside the paragraph tag.

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