Angular components communicate using specific patterns based on their relationship (parent-to-child, sibling, or unrelated). The most common methods are @Input() and @Output() decorators, but newer features like Signals and Model Inputs offer modern alternatives.
Classic approach with Decorators
Before Angular v17, we used to pass information from the parent to the child component and vice versa by using the @Input() and @Output() decorators. To pass information to a child component (from the parent), we need to pass it through brackets [product]="productData". If we need to receive data in our parent component, we need to assign it as (addToCart)="addProductToCart($event)" to handle the event.
Child Component:
// Component with traditional `Input` and `Output`.
...
@Component({
selector: 'app-product-card'
template: `
<div class="product-card">
<img [ngSrc]="product.image" width="200" height="200">
</div>
...
<button (click)="onAddToCart($event)"> Add To Cart </button>
`
})
class ProductCardComponent{
// Receives data from parent.
@Input() productData!: Product;
// Sends data to parent.
@Output() addToCart= new EventEmitter<Product>();
onAddToCart(event: MouseEvent): void {
// prevents the click event from bubbling up to the parent component and only emits the product
event.stopPropagation();
// emit the product to the parent component
this.addToCart.emit(this.product);
}
}
...
Parent Component:
...
@Component({
selector: 'app-product-page'
template: `
<app-product-card [product]="productData" (addToCart)="addToCart($event)">
`
})
class ProductPageComponent{
...
// Receives the event from the child and adds product to cart
addToCart(product: Product){
this.cartService.addToCart(product);
}
}
Modern Approach with input() and output()
Introduced in Angular v17.3, made stable and production ready by Angular v19, the input() signal function and the output() *function *(not a signal) were introduced. This offers better performance, improved change detection and smooth integration with Signals. This also provides much cleaner code to work with.
Below is a code snippet of the child component using the new approach using the input() signal and output() function. The parent component remains unchanged.
// Component with modern `Input` and `Output`.
@Component({...})
class ProductCardComponent{
// Receives data from parent - using input signals
product = input<Product>();
// Sends data to parent - using output function
addToCart = output<Product>();
onAddToCart(event: MouseEvent): void {
...
// emit the product to the parent component
this.addToCart.emit(this.product);
}
}
Here are some notable changes from the above code snippet:
input()function declares a signal. This automatically updates when the parent component changes the value of the input.output()expressions are used over the@Output()decorator.No
EventEmitteranymore.No need to use the
ngOnChangeslifecycle hook to track changes. Instead, it is recommended to usecomputedandeffectwhen working signal-based inputs.
Migration to Signal Inputs and Output Function
The Angular CLI provides schematics that help you to automatically migrate your project from the classic @Input() and @Output() to the new input() signal function and ouptut() function.
ng generate @angular/core:signal-input-migration
ng generate @angular/core:output-migration
These commands will:
Convert the @Input() properties to the signal-based
input().Convert the @Output() properties to their
output()equivalents.Imports in the file of components or directives, at TypeScript module level, are updated as well.
For projects with API calls such as
event.next(), which are not recommended, they are migrated toevent.emit()and removesevent.complete()calls.
Conclusion
As the Angular framework continues to evolve, it is highly recommended to start adopting the Signal-based architecture which gives you improved change detection, moving away from the monkey patching that was witnessed when working ZoneJS-based Angular applications. With Zoneless Angular applications now being the default past Angular v21, Signal-based architecture is the now go-to for an ideal Angular application and improved Developer Experience.