Event Binding en Angular

En esta unidad vamos a conocer cómo podemos reaccionar a eventos del usuario en Angular. Para ello, vamos a ver cómo podemos utilizar el event binding en Angular.

Para entender este tema vamos a crear un nuevo proyecto Angular. Para ello, abrimos una terminal y ejecutamos el siguiente comando:

ng new event-binding

Una vez creado el proyecto, nos movemos a la carpeta del proyecto:

cd event-binding

Y abrimos el proyecto en Visual Studio Code:

code .

Event Binding

El event binding en Angular nos permite reaccionar a eventos del usuario, como por ejemplo, un click, un doble click, un hover, etc. Para ello, vamos a ver un ejemplo sencillo.

Vamos a crear un nuevo componente llamado contador:

ng g c contador

Una vez creado el componente, nos movemos al archivo contador.component.html y escribimos el siguiente código:

<h1>Contador</h1>

<p>{{ contador }}</p>

<button>Incrementar</button>
<button>Decrementar</button>

En este código, tenemos un título, un párrafo que muestra el valor del contador y dos botones, uno para incrementar el contador y otro para decrementarlo.

Para poder reaccionar a los eventos de click de los botones, vamos a utilizar el event binding. Para ello, nos movemos al archivo contador.component.html y escribimos el siguiente código:

<h1>Contador</h1>

<p>{{ contador }}</p>

<button (click)="incrementar()">Incrementar</button>
<button (click)="decrementar()">Decrementar</button>

En este código, estamos utilizando el event binding para reaccionar al evento de click de los botones. Cuando se haga click en el botón de incrementar, se va a ejecutar el método incrementar() y cuando se haga click en el botón de decrementar, se va a ejecutar el método decrementar().

Ahora, nos movemos al archivo contador.component.ts y escribimos el siguiente código:

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

@Component({
  selector: 'app-contador',
  standalone: true,
  imports: [],
  templateUrl: './contador.component.html',
  styleUrl: './contador.component.css'
})
export class ContadorComponent {

    contador: number = 0;
    
    incrementar() {
        this.contador++;
    }
    
    decrementar() {
        this.contador--;
    }
}

En este código, estamos creando una variable contador que va a almacenar el valor del contador y dos métodos incrementar() y decrementar() que se van a encargar de incrementar y decrementar el contador respectivamente.

Tip

No olvides agregar el componente ContadorComponent a la aplicación principal en el archivo app.component.ts.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
1import { ContadorComponent } from './contador/contador.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
2    ContadorComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'event-binding';
}

1

Importamos el componente ContadorComponent.

2

Agregamos el componente ContadorComponent al arreglo de imports.

Tambien es necesario agregar el selector del componente ContadorComponent en el archivo app.component.html.

<app-contador></app-contador>

Ahora, si ejecutamos la aplicación con el siguiente comando:

ng s -o

Podremos ver el contador en la pantalla y si hacemos click en los botones de incrementar y decrementar, el contador se va a incrementar y decrementar respectivamente.

Reto

Crea un nuevo proyecto Angular y crea un nuevo componente llamado calculadora.

ng new calculadora
cd calculadora
ng g c calculadora

En este componente, crea una calculadora sencilla con dos inputs para ingresar los números y cuatro botones para realizar las operaciones de suma, resta, multiplicación y división. Utiliza el event binding para reaccionar a los eventos de click de los botones y mostrar el resultado de la operación en un párrafo.

Posible solución

<h1>Calculadora</h1>

<input type="number" [(ngModel)]="numero1" placeholder="Número 1">
<input type="number" [(ngModel)]="numero2" placeholder="Número 2">

<button (click)="sumar()">Sumar</button>
<button (click)="restar()">Restar</button>
<button (click)="multiplicar()">Multiplicar</button>
<button (click)="dividir()">Dividir</button>

<p *ngIf="resultado !== undefined">Resultado: {{ resultado }}</p>
<p *ngIf="resultado === undefined">Realiza una operación</p>

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-calculadora',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './calculadora.component.html',
  styleUrls: ['./calculadora.component.css']
})
export class CalculadoraComponent {
  numero1: number | undefined;
  numero2: number | undefined;
  resultado: number | undefined;

  sumar() {
    this.resultado = (this.numero1 ?? 0) + (this.numero2 ?? 0);
  }
  
  restar() {
    this.resultado = (this.numero1 ?? 0) - (this.numero2 ?? 0);
  }
  
  multiplicar() {
    this.resultado = (this.numero1 ?? 0) * (this.numero2 ?? 0);
  }
  
  dividir() {
    this.resultado = (this.numero1 ?? 0) / (this.numero2 ?? 0);
  }
}

Si todo salio bien, deberías ver algo como esto:

Conclusión

En esta unidad aprendimos cómo podemos reaccionar a eventos del usuario en Angular utilizando el event binding. Vimos cómo podemos reaccionar a eventos de click de los botones y cómo podemos ejecutar métodos en el componente cuando se produce un evento. En el siguiente tema, vamos a ver cómo podemos reaccionar a eventos del usuario utilizando el event binding en Angular.