Event binding ()
Event binding syntax consists of a target event name within parentheses on the left of an equal sign, and a quoted template statement on the right. The following event binding listens for the button's click events, calling the component's
onSave() method whenever a click occurs:
You can also bind an unlimited number of event handlers on the same event by separating them with a semi-colon:
<button (click)="onSave1(); onSave2(); …">Save</button>
In an event binding, Angular sets up an event handler for the target event.
When the event is raised, the handler executes the template statement. The template statement typically involves a receiver, which performs an action in response to the event, such as storing a value from the HTML control into a model.
The binding conveys information about the event, including data values, through an event object named
<input [value]="currentHero.name" (input)="currentHero.name=$event.target.value">
Some people prefer the
on- prefix alternative, known as the canonical form:
<button on-click="onSave()">On Save</button>