Event binding ()
You can switch to the latest version Angular 10.
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:
<button (click)="onSave()">Save</button>
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 $event
.
<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>