?‍?‍? Parent → Child Communication with `@Input`

Angular Inputs Parent ➝ Child Data Flow

? Quick Overview

In Angular, data is commonly passed from a parent component to a child component using the @Input decorator. This lets the child receive values and use them in its own template or logic.

You define an @Input property in the child, then bind a parent property to it using [propertyName]="parentValue" syntax in the parent template.

? Key Concepts

@Input decorator – marks a child property as bindable from its parent.
Property binding – parent uses [childProp]="parentProp" in its template.
One-way data flow – data flows from parent ➝ child (not automatically back).
Change detection – when the parent value changes, the child automatically sees the update.

? Syntax / Theory

Step 1: Import and apply @Input in the child component.

Step 2: Bind a parent property to the child’s @Input in the parent template.

? View Code Example – Child Component with @Input

// child.component.ts - receives data from the parent using @Input
import { Component, Input } from '@angular/core';

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

? View Code Example – Parent Passing Data

// parent.component.ts - sends data to the child via property binding
import { Component } from '@angular/core';

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

? How It Works (Explanation)

In ChildComponent, the property message is decorated with @Input(). This tells Angular that message can receive a value from a parent.
In ParentComponent, the template uses [message]="parentMessage" to bind the parent’s parentMessage value to the child’s message property.
Whenever parentMessage changes in the parent, the value shown in the child’s template ({{ message }}) updates automatically.

?️ Live Output (Conceptual)

If the parent has:

parentMessage = 'Hello from Parent!';

Then the child’s rendered HTML will look like:

Message from Parent: Hello from Parent!

? Tips & Best Practices

Always initialize @Input properties (e.g., = '') to avoid undefined issues.
You can pass any type of data: strings, numbers, objects, arrays, even custom types.
Remember that @Input is one-way data flow; if the child needs to notify the parent, use @Output with EventEmitter.
Try not to mutate complex @Input data directly in the child if it’s meant to be read-only; prefer treating inputs as immutable.

? Try It Yourself / Practice Tasks

Create a child component that receives a list of items (array of strings) from the parent via @Input and displays them in a bullet list.
Pass an object from parent to child (e.g., a user profile with name and age) and show its properties in the child template.
Add a button in the parent that changes parentMessage and observe how the child’s message updates in real time.