How to pass data to child components in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
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.
