Listening for Events Using an Output Binding

Previously, we learned that input binding is used when we want to pass data between components. This method is applicable in scenarios where we have two components, one that acts as the parent component and the other as the child. What if we want to communicate the other way around, from the child component to the parent component? How do we notify the parent component about specific actions that occur in the child component?

Consider a scenario where the product details component should have a button to add the current product to a shopping cart. The shopping cart would be a property of the product list component. How would the product detail component notify the product list component that the button was clicked? Let’s see how we would implement this functionality in our application:

1. Open the product-detail.component.ts file and import the Output and EventEmitter artifacts from the @angular/core npm package: