How to Pass Data to Child Component in Angular: Simple Guide

In Angular, you pass data to a child component using the @Input decorator on a property inside the child component. The parent component binds a value to this property using property binding syntax like [propertyName] in the child component's selector tag.

Syntax

To pass data from a parent to a child component, you use the @Input decorator in the child component to declare an input property. Then, in the parent component's template, you bind a value to that property using square brackets.

• @Input(): Marks a property in the child component as input.
• property binding: Uses [propertyName] in the parent's template to send data.

typescript

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

@Component({
  selector: 'app-child',
  template: `<p>Child received: {{ data }}</p>`
})
export class ChildComponent {
  @Input() data!: string;
}

@Component({
  selector: 'app-parent',
  template: `<app-child [data]="parentData"></app-child>`
})
export class ParentComponent {
  parentData = 'Hello from parent';
}

Output

Child received: Hello from parent

Example

This example shows a parent component passing a string to its child component. The child uses @Input to receive the data and display it.

typescript

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

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

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

Output

Message from Parent:
Welcome to Angular!

Common Pitfalls

Common mistakes when passing data to child components include:

• Forgetting to add @Input() decorator on the child property, so Angular won't recognize it as input.
• Using incorrect property binding syntax in the parent template (missing square brackets).
• Trying to pass data before it is initialized in the parent, causing undefined values.
• Not using the correct property name in the binding (must match the child input property).

typescript

/* Wrong: Missing @Input decorator */
import { Component } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `<p>{{ data }}</p>`
})
export class ChildComponent {
  data!: string; // No @Input decorator
}

/* Right: Add @Input decorator */
import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `<p>{{ data }}</p>`
})
export class ChildComponent {
  @Input() data!: string;
}

Quick Reference

Summary tips for passing data to child components in Angular:

• Use @Input() on child component properties.
• Bind data in parent template with [propertyName].
• Ensure property names match exactly.
• Initialize parent data before passing.
• Use Angular DevTools or console logs to debug data flow.

Key Takeaways

Use @Input decorator to declare input properties in child components.

Bind data from parent to child using square bracket syntax in the template.

Property names in @Input and binding must match exactly.

Always initialize parent data before passing it to avoid undefined values.

Check for missing @Input decorators as a common source of errors.