# Event Handling Course: [Angular](https://www.devtutorials.ai/learn/angular) · Section: Core Angular Concepts Source: https://www.devtutorials.ai/learn/angular/core-concepts/event-handling > How Angular handles click, keyboard, input and change events, reading the event object, passing parameters to handlers, and preventing the browser's default behavior. ## Introduction to Events An **event** is a signal the browser sends when something happens on the page, such as a click, a key press or a change to a form field. **Event handling** is the code that runs in response. In Angular, the template listens for an event and calls a method in the component class. The method updates the class data, and Angular updates the page. ### Real-World Example On a checkout page, clicking **Apply** validates a coupon code, pressing **Enter** in the address field moves focus to the next field, and changing the delivery option recalculates the total. Submitting the form must not reload the page, so the handler stops the browser's default submit and sends the order to the API instead.

An event runs a method. The method changes data. Angular updates the page.

## Event Binding Review You listen for an event with **event binding**: the event name in round brackets, followed by a template statement. ```html ``` - `(click)` is the event to listen for. - `save()` is the statement Angular runs when the event fires. It usually calls a method of the component class. Angular supports every standard DOM event this way, such as `click`, `dblclick`, `keydown`, `keyup`, `input`, `change`, `focus`, `blur` and `submit`. ## Click Events The `click` event fires when the user presses and releases the mouse button on an element, or presses Enter or Space on a focused button. It is the most common event in any app. ```angular runnable title="Click events update a shopping cart" import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `

Cart: {{ quantity }} item(s) · ₹{{ quantity * price }}

`, }) export class App { quantity = 1; price = 799; increase() { this.quantity++; } decrease() { if (this.quantity > 0) this.quantity--; } } ``` The third button listens for `dblclick`, which fires only after two quick clicks. ## Keyboard Events Keyboard events fire when the user presses keys while an element has focus.

A key filter such as keyup.enter calls the method only for that key.

- `keydown` fires when a key goes down. It repeats while the key is held. - `keyup` fires when the key is released. Angular adds **key event filters**. `(keyup.enter)` runs only for the Enter key, and `(keydown.escape)` runs only for Escape. You can combine modifier keys: `(keydown.control.s)`. ```angular runnable title="Key filters run code only for specific keys" import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `

`, }) export class App { result = 'Type a word and press Enter. Press Escape to clear.'; search(term: string) { this.result = term ? 'Searching for "' + term + '"…' : 'Enter a search term first.'; } } ``` Key filter names are the browser's `KeyboardEvent.key` values in lower case, such as `enter`, `escape`, `tab`, `space`, `arrowup` and `arrowdown`. Modifier keys come first: `(keydown.shift.enter)`. ## Input Events The `input` event fires on every change to the value of an `` or `

{{ remaining }} characters left

`, }) export class App { limit = 140; remaining = 140; onInput(event: Event) { const text = (event.target as HTMLTextAreaElement).value; this.remaining = this.limit - text.length; } } ``` ## Change Events The `change` event fires when the user **commits** a change. The timing depends on the element: - For `

Gift wrap (₹49)

Order total: ₹{{ subtotal + deliveryCost + (giftWrap ? 49 : 0) }}

`, }) export class App { subtotal = 1200; deliveryCost = 0; giftWrap = false; costs: Record = { standard: 0, express: 99, sameday: 199 }; setDelivery(event: Event) { const choice = (event.target as HTMLSelectElement).value; this.deliveryCost = this.costs[choice]; } } ``` | Point | `input` | `change` | |---|---|---| | Text fields | Fires on every key press | Fires when the field loses focus | | `

`, }) export class App { lastKey = 'No key pressed yet'; lastClick = 'No click yet'; onKey(event: KeyboardEvent) { this.lastKey = 'Key: ' + event.key + ' (code: ' + event.code + ')'; } onClick(event: MouseEvent) { this.lastClick = event.ctrlKey ? 'Clicked with Ctrl' : event.shiftKey ? 'Clicked with Shift' : 'Normal click'; } } ``` `event.target` is typed as a general `EventTarget`. To read `value`, tell TypeScript the element type: `(event.target as HTMLInputElement).value`. ## Passing Parameters to Event Handlers A handler can receive any values from the template, not only `$event`. You pass them as normal method arguments: `(click)="select(plan)"`. This is how one method serves many elements, such as a list where each row has its own Delete button. ```angular runnable title="Each button passes its own item to the same method" import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `

{{ file }}

`, }) export class App { files = ['report.pdf', 'invoice.xlsx', 'logo.png']; message = ''; remove(index: number, name: string) { this.files.splice(index, 1); this.message = 'Deleted ' + name; } } ``` You can pass both your own values and the event: `(click)="remove(i, file, $event)"`. ## Preventing Default Behavior Many elements have a **default behavior** that the browser runs after the event. A form submit reloads the page, a link click opens a new address, and a right-click opens the context menu.

preventDefault() stops the browser action, so only your code runs.

Call `event.preventDefault()` in the handler to stop the default behavior. Your own code still runs. ```angular runnable title="preventDefault keeps the form submit inside Angular" import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `

Read the docs

`, }) export class App { status = 'Nothing submitted yet'; onSubmit(event: SubmitEvent) { event.preventDefault(); this.status = 'Subscribed without reloading the page'; } onLink(event: MouseEvent) { event.preventDefault(); this.status = 'Link click handled by Angular'; } } ``` Click Subscribe and the link. The page stays in place and the status updates. In real forms, Angular's forms package provides `(ngSubmit)`, which prevents the page reload for you. You will use it in the Forms chapter. | Method | What it stops | |---|---| | `event.preventDefault()` | The browser's default action: submit, navigation, context menu | | `event.stopPropagation()` | The event reaching parent elements' handlers | ## Common Mistakes

| Mistake | What you see | Fix | |---|---|---| | Missing parentheses: `(click)="save"` | Nothing happens on click | Call the method: `(click)="save()"` | | Reading `$event.target.value` in a TypeScript handler | `Property 'value' does not exist on type 'EventTarget'` | Cast: `(event.target as HTMLInputElement).value` | | Using `change` for live text feedback | The counter updates only after leaving the field | Use the `input` event | | Form submit without `preventDefault()` | The page reloads and loses its state | Call `event.preventDefault()`, or use `(ngSubmit)` | | `(keyup.Enter)` with a capital E | The handler never runs | Key names are lower case: `(keyup.enter)` | | Heavy work in a `keydown` handler | Typing feels slow | Keep handlers short, or react on `keyup.enter` |

## Check Yourself ## Exercises ## What to Remember - Listen for events with `(event)="handler()"`, and use key filters such as `(keyup.enter)` for specific keys. - Use `input` for live feedback and `change` for committed values. Pass `$event` or your own values to the handler. - Call `event.preventDefault()` to stop the browser's default action, such as a page reload on submit. Next: **Component Communication**, how parent and child components send data and events to each other.