Modern Angular Course 15: Add to Cart with output()

本站添加: 2026-05-05

[00:00:00]Hi everyone. Welcome back. My name is Loiane and in the previous video we used computed signals to filter the products list. In this video we're tackling a different kind of problem, child to parent communication. In video number 11 we'll learn how the signal input sends data down from parent to the child. Now we need to do the reverse. The child needs to tell the parent that something happened. In our case when the user clicks on the add to cart inside the products card the parent products grid needs to know about it. So let's recap the two directions of component communication that we have in Angular.

[00:00:42]We have a parent to child where we use input. In this case the parent passes data down to the child.

[00:00:52]And now we're going to learn how the child, in this case the product card, can emit events so the parents can listen and do something about it. So we have done the parent to child with the input.

[00:01:08]And if you guessed that we're going to be using output to do the child to parent communication, you guessed right.

[00:01:14]So think of output as a notification channel. The child says, "Hey, this happened." And the parent decides what to do. In our case the products card, which is the child, will emit an event when the user clicks in add to cart like this, which right now doesn't do anything. And the products grid, the parent, will listen for that event and respond. So this is how Angular components stay decoupled. The child doesn't know or care what the parent does with this event. And components like the product card are sometimes called presentational components or dumb components. Honestly, I don't like the latter. But the point is presentational components don't contain advanced logic.

[00:02:04]They simply receive data through inputs and notify the parent through outputs.

[00:02:09]All the real work like managing the cart happens elsewhere. This keeps them simple, reusable, and easy to test. Just for comparison, if we had to test this component product card right now we only have a couple of read-only properties which are public because both are input.

[00:02:31]And the HTML we just have some presentational logic so we can render the products card.

[00:02:38]And we have an if and else block as well. But everything else is just interpolation. Now if we go to products grid from an HTML standpoint, we already have an input. We have a for loop, we have a child component, and we also have some placeholder HTML. If we go to the TypeScript, even if we collapse this because we're going to do something about this later, we already have one signal, two signals, a computed signal which has some logic inside it. We also have a clear search which right now we're not using this, but we could even comment this out. But we have 50 lines of code, give it or take, of logic that's a little bit more complex to test than compared to two properties declared in products card. So that is the beauty and one of the big advantages in decoupling your components so they are easy to test and you keep the complexity only in one place instead of all the places or all the components that you have within your project. So let's go ahead and create an output here. We're going to follow the same formula that we have been following for now.

[00:03:51]You guessed right, read-only. I am going to name the output add to cart because this is the event that I would like to emit. And usually when we are emitting events, it is a good practice to add a verb to it.

[00:04:10]And this is going to be an output.

[00:04:12]Because this is a signal, it's all lower case and Angular core. And likewise there is also a decorator named output like this. But because this is being decommissioned in the next version of Angular, so we will skip for now and we're going to focus on how to do things for the future. Now the idea is whenever I click on the add to cart button, I would [clears throat] like to emit an event that a product has been added to the cart. So in this case we're also going to type this event with a product type. So the product type that we're passing through the diamond operator is telling Angular what data this output carries. And usually whenever we have an output, we also have to emit that event.

[00:04:59]So next we're also going to declare a method so we can emit this event.

[00:05:04]So protected because we're going to be using this method in the HTML, on add to cart. So this is also a this is also a convention that I like to follow, add to cart and the on add to cart which is doing something when we're clicking on the add to cart. And inside this method we're going to access the add to cart signal and we're going to emit this event.

[00:05:31]And we're going to emit this event by passing the product itself. So this product and we're going to read the data from the signal so we are emitting a product itself. So now we have an output, we have a method that's going to emit the event from the output and we need to wire the button click to our new method so this event can be triggered whenever the user is clicking the button. So we're going to open the product card HTML. We're going to find the button which is the add to cart button and we're going to listen for the event that is click. And here inside the click we're simply going to mention our add to cart event. So we use parentheses for events and square brackets for properties or event binding or property binding.

[00:06:24]So this calls the add to cart which emits the product through the output. In case you're wondering if this is working or not, one thing that I like to do is just a console log. And if you have the ng serve or npm run start running, you can go back to your browser, open the developer tools. So we're going to come to these three dots, more tools, developer tools. On the console area we're going to click and button was clicked.

[00:06:52]And it's going to show that the button was clicked three times. So this method is working. So now that the product card can emit events, someone needs to listen to these events. So we're going to go to products grid HTML, which is the parent component and we're going to update the product card. Remember this is the parent component and the product card is the child component.

[00:07:18]So we have done something here already.

[00:07:20]So this is the input because we're using the property binding.

[00:07:24]Now we're going to do an event binding because we're listening to the output.

[00:07:29]And again how we listen events in Angular is through open and closing parentheses.

[00:07:35]And this is the beauty of using IntelliSense in tools such as Visual Studio Code.

[00:07:41]We can see the IntelliSense which is provided by the Angular plugin that we have installed in our first few videos.

[00:07:49]It's telling us that we do have this event available. So you can just use this.

[00:07:54]And here we can do on add to cart. And to capture the data that is being passed on through this event, cuz remember we're we're emitting and passing the product data what we will do is we will pass the event itself and through the event we're going to be able to capture the data. So this pattern mirrors the native DOM events like click in JavaScript, but this is a custom component event. So the next step is to add the handler in the products grid TypeScript code.

[00:08:27]So copy this and again protected. So we have the basic structure of the method here. But now we're also expecting a product. So I'll call product. So this is my variable and this is the type of the variable. So one thing that we can do here to make sure that everything is working console log added to cart and we're going to capture the product name since we have access to the entire product object. Let's see if this is working.

[00:08:59]I'm going to add the smart fitness watch to the cart and has been added to the cart. If we add the Bluetooth speaker we'll get the Bluetooth speaker on the console log. If we click on the add to cart for the headphones, we're also getting the headphones. In this video we learned child to parent communication with the output signal. The output product creates an event channel in the child. The emit method sends the value to the parent.

[00:09:32]In the parent, which is product grid, and this code add to cart catches the event in the parent template. So so far we have two forms of communication, the parent to child with input and we also have the child to parent with output. In the next video we will create a cart service so this button actually adds product to our shared cart, and we will learn other forms of communication between components in Angular. If you're enjoying the series or if you have any feedback, please let me know in the comments. Thank you for watching, and I'll see you in the next video.