How to bind an Event to an component template Element in Angular

The most current version as of .

To bind an event to an element in Angular you have to specify the name of the event (target event name) as well as the JavaScript to execute, when the event is fired, by providing it in a template statement.

At the following example, we bind a click-event to a button-element to fire the onDelete()-method of the Angular component.

<button (click)="onDelete()">
    🗑️
</button>

When you click the 🗑️-<button> from the example, a click event is rising and the onDelete()-method is executed.

You write that method in the class of your .component.ts file.

As a taget event name you can specify pretty much any event. You simply have to wrap the event name into a pair of parentheses (…). For example (change) or (focus).

A complete list of possible DOM events can be found here: HTML DOM Events.

Note that you can also create your own events with custom event names using EventEmitter. Details on that can be found here: Custom events with EventEmitter.

For more details on event binding check out the docs.

— David Wolf