How to pass data to child components in Angular

Passing data from parent to child components is fundamental for creating reusable Angular components and establishing proper data flow in component hierarchies. As the creator of CoreUI, a widely used open-source UI library, I’ve designed thousands of Angular components that rely on @Input properties for customization, configuration, and data sharing in enterprise applications. From my expertise, the most effective approach is to use the @Input() decorator with property binding. This method provides type-safe data flow, excellent component reusability, and clear parent-child communication patterns that scale well in large applications.

Use @Input() decorator in child components and property binding in parent templates to pass data.

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

@Component({
  selector: 'app-user-card',
  template: `
    <div class="card">
      <h3>{{ userName }}</h3>
      <p>{{ userEmail }}</p>
    </div>
  `
})
export class UserCardComponent {
  @Input() userName: string = ''
  @Input() userEmail: string = ''
}

// Parent Template
<app-user-card [userName]="user.name" [userEmail]="user.email"></app-user-card>

The @Input() decorator marks component properties as bindable from parent components. In the parent template, use property binding with square brackets [propertyName]="value" to pass data to child components. The child component receives the data reactively - when parent data changes, the child component automatically updates. You can pass any TypeScript type including primitives, objects, arrays, and functions. This creates a unidirectional data flow from parent to child.

Best Practice Note:

This is the same approach we use in CoreUI Angular components for flexible customization and consistent API design. Use TypeScript interfaces for complex objects: @Input() user!: User and consider using OnChanges lifecycle hook to react to input property changes in the child component.


Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


About the Author