Event binding - lordoftheflies/angular-essential-training GitHub Wiki

The event binding templates syntax in Angular allows you to wire up event handlers from within your component templates. You can wire up native Dom element events, as well as custom events you create for your components to emit. Let's take a look at how you wire up to native events. Our media-item.component.HTML file has a delete link. Let's adds some click functionality to that. Where property binding makes use of the square brackets, event binding makes use of parentheses. So on the a tag element for the delete we can add the event named click wrapped with parentheses and set it equal to a statement in quotes that will be evaluated. Let's bind this to a function call of a function named onDelete. Notice that we use the term click here and not on click. Angular has a pattern for native Dom events where it is looking for the event name without the on. So any native Dom event that is named on X, you would bind it by leaving off the on prefix. Angular is expecting the onDelete method to be available in the execution context. Remember that we can make a method available by putting it on the component class. So let's switch over to the media-item.component.Ts file and add an onDelete method. In here, we would run our delete logic which we will implement later. For now, let console log a message and see it in action. So if we switch over to the browser and with the console and the dev tools open, click on the remove link and see our console log output from our event binding.