Angular 4: Event Binding
easy⏱ 5 mincourseangular
(event)="handler()" wires up the DOM
Any native DOM event — click, input, submit, keydown, mouseenter, and dozens more — can be bound with (eventName)="expression". The expression usually calls a method on the component, e.g. (click)="increment()". Angular attaches a real event listener behind the scenes and cleans it up automatically when the element is destroyed.
<button (click)="increment()">+1</button>
<input (input)="onInput($event)" placeholder="Type here" />
$event: the native browser event
Inside an event binding, the special $event variable refers to the actual native event object the browser fired — a KeyboardEvent, MouseEvent, SubmitEvent, etc. For text inputs, ($event.target as HTMLInputElement).value reads what the user typed. For a <form (submit)="onSubmit($event)">, calling $event.preventDefault() inside onSubmit stops the browser's default full-page-reload submission — essential for any Angular-handled form.
Build QuickNote
Bind the text input's (input) event to an onDraftChange($event) method that updates a draft signal from $event.target.value. Bind the <form>'s (submit) event to a save($event) method that calls $event.preventDefault() and pushes the draft onto a notes signal.