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