Interactivity at Your Fingertips: Event Binding in Angular

Give your application life by learning how to react to user clicks, keyboard input, and other browser events.

🅰️

Welcome! Let's make our Angular app interactive by responding to a user's click.

/* Let's begin... */

Listening to the User

Event binding is Angular's way of listening for user actions. When a user clicks a button, types in a field, or moves the mouse, these are all DOM events. Event binding lets your component know when these happen so it can react.

The Parentheses () Syntax

The syntax is simple and memorable: parentheses. You wrap the name of the DOM event (like click, keyup, or mouseover) in parentheses: (click). This tells Angular, "Hey, listen for a click on this element."

Connecting Events to Methods

Listening is only half the story. You need to tell Angular *what to do* when the event happens. You do this by setting the event binding equal to a method from your component's class, like (click)="onSave()". Now, every click will run the onSave() function.

Using the $event Object

Sometimes you need more details about the event, like what key was pressed or the mouse position. Angular provides a special variable, $event, that you can pass into your method: (keyup)="onKey($event)". This gives your component access to all the raw event information.

Practice Zone

Interactive Test 1: Identify the Syntax

Drag the correct syntax to the placeholder to complete the event binding.

Arrastra en el orden correspondiente.

Arrastra las opciones:

(click)

[click]

Completa el código:

<button ______='method()'>Click</button>

🔒 Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.


<input ()="onInputChange()">

🔒 Unlock with Premium

Practice Example: Build a Counter

Create a component with a counter. Add a button that, when clicked, calls a method to increment the counter's value.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <h2>Counter: {{ count }}</h2>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

🔒 Unlock with Premium

Knowledge Check

Which syntax correctly binds a button's click event to a method called `saveData`?

🔒 Unlock with Premium

Event Binding in the Bigger Picture

Event binding is the "user to component" part of communication. When combined with property binding, it forms the basis of powerful features in Angular.

1. The Foundation of Two-Way Binding

Two-way data binding, famous for the [(ngModel)] syntax, is just a shortcut. Under the hood, it's a combination of property binding `[value]` to set data and event binding `(input)` to listen for changes.


<input [(ngModel)]="name">


<input [ngModel]="name"
       (ngModelChange)="name = $event">

Name

2. Triggering Component Logic

User events are the primary triggers for your application's logic. A click event might trigger an HTTP request to save data, a form submission, or navigation to a new page.

// component.ts
save() {
  this.http.post('/api/data', this.formData)
    .subscribe(() => this.router.navigate(['/success']));
}

// template.html
<button (click)="save()">Submit</button>

Practical Takeaway: Master event binding, and you've mastered how to make your Angular application respond to its users. It's the critical link between user actions and your component's business logic.

Event Binding Glossary

Event Binding: The mechanism for listening to and responding to user actions (DOM events) in an Angular template. It sends information from the template to the component class.
(click), (keyup), (mouseover): Examples of **DOM Events** that can be bound. The name of the event is placed inside parentheses `()`.
Template Statement: The code that executes when the event occurs, placed inside the quotes. This is usually a component method, e.g., `(click)="myMethod()" `.
Event Handler: The method in the component's class that is called by the template statement (e.g., `myMethod()`). This is where you write your logic.
$event: An object automatically passed by Angular that contains data about the original DOM event. You can pass it as an argument to your event handler, e.g., `(click)="myMethod($event)"`.