@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
}

Need a 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 = '';
}

Need a 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:
// 

Need a 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

Need a hint?

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