Component Communication in Angular: Input(), Output()

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