`Event Binding`

Listens to DOM or component events and runs a template statement.

Since Angular 2+ Spec ↗

Syntax

(event)="statement"

Parameters

Name	Type	Required	Description
`statement`	`expression`	No	Handler invoked when the event fires; $event holds the payload.

Returns

template binding — Wires the event to the handler statement.

Examples

@Component({
  selector: 'app-x',
  standalone: true,
  template: `
    <button (click)="save()">Save</button>
    <input (input)="onInput($event)" />
    <app-child (done)="onDone($event)"></app-child>
  `,
})
export class XComponent {
  save() {}
  onInput(e: Event) {}
  onDone(value: string) {}
}

Notes

Parentheses bind native DOM events or component/directive outputs. The `$event` variable is the DOM Event for elements or the emitted value for outputs. Template statements may include assignments and method calls, unlike binding expressions.