Event binding works a bit differently in the sense that it reverses the flow. These bindings are used to respond to events, and usually bind an event to a component event handler. You use event bindings by surrounding the event with parenthesis and have the handler as a standard assignment:

<span (click)="onSelected()">Category Name</span>

In the preceding example, the component view binds the click event of span to the component's onSelected function. When the user clicks the span area, the component's function will be executed.

Furthermore, Angular supports the notorious $event object as part of the event binding's statement context. In standard HTML events, $event represents the actual HTML event object, whereas in a component's custom events, it represents the payload that was specified when emitting the event:

<span (click)="onSelected($event)">Category Name</span>