Introducción al Event Binding de Angular

Clase 8 de 21 • Curso de Fundamentos de Angular

Contenido del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

20
Despliegue con Firebase Hosting
09:48 min

Despedida

21
Continúa con el Curso de Angular: Componentes y Servicios
00:57 min

Tomar examen

Resumen

A lo igual que el Property Binding nos permite modificar el valor de los atributos de los elementos HTML desde el controlador, el Event Binding permite controlar los eventos que suceden en estos elementos. El clic de un botón, detectar cambios en un campo, el envío de un formulario, entre otros eventos. Para esto utiliza los paréntesis () para el bindeo de la propiedad del elemento.

Si tienes en tu componente:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  enviarFormulario() {
    // ...
  }
}

Puedes ejecutar el método enviarFormulario() cuando se realiza un clic en un botón de la siguiente manera:

<button (click)="enviarFormulario()" >

Aporte creado por: Kevin Fiorentino.

Comentarios

Kevin Zavala

student•

El event Binding no solamente se limita a eventos declarados dentro de la clase, también se pueden aplicar directamente en la llamada del evento desde el elemento:

<button [disabled]="buttonDissable" (click)="value = value + 1">Presioname</button>

Obed Paz

student•

nada mal Angular. No es tan feo como lo pintan 🤔 me esta gustando de hechoi

Andrés Jiménez

student•

es que creo que Nicolas lo explica muy bien, se ve muy sencillo. Muy buen curso.

Erick Saravia

student•

La verdad angular es muy bueno, de hecho fue mi primer framework de front (en ese entonces apenas iba por la version 5), pero si tengo que decir que angular se siente como una bestialidad si el proyecto no lo amerita

Danny Pacheco

student•

Aqui les dejo el ejercicio pero con un botón para sumar edad y que deje de hacerlo cuando llegue a 100 y otro botón de restar edad cuando llegue a cero.

archivo ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  name:string="Danny";
  age:number=22;
  img:string='https://source.unsplash.com/random';
  btnState:boolean=true;

  person={
    name:"Pedro",
    age:22,
    avatar:'https://source.unsplash.com/random'
  }

  toggleButton(){
    this.btnState=!this.btnState;
  }

  addAge(){
    if(this.person.age<101){
      this.person.age++;
    }

  }

  restAge(){
    if(this.person.age>0){
      this.person.age--;

    }

  }
}

archivo html

<h2>Eventos</h2>
<button [disabled]="btnState">Enviar</button>
<button (click)="toggleButton()">Toggle Button</button>
<p>edad {{person.age}} </p>
<button (click)="addAge()" >Add age</button>
<button (click)="restAge()" >Rest age</button>
<h2>Propiedades</h2>
<button [disabled]="btnState" >Enviar</button>
<input type="text" [value]="person.name">
<progress max="100" [value]="person.age"></progress>
<img [src]="person.avatar" width="100px" height="100px" alt="random image">
<h2>HOLA mundo</h2>
<h3>{{'hola mundo'.repeat(5)}} </h3>
<p>3+3={{3+3}}</p>
<h4>Soy {{name}}, y tengo {{age}}</h4>
<img src={{img}} width="100px" height="100px" alt="random image">

Enmanuel Josue Sarmiento Benitez

student•

Excelente, gracias

Juan Carlos Ortiz Romero

student•

Event Binding El Event Binding le permite escuchar y responder a las acciones del usuario, como pulsaciones de teclas, movimientos del mouse, clics y toques (Atributos HTML y propiedades DOM).

Anfernee Valera

student•

Coño, no se si es porque ya tengo tiempo estudiando JS y un rato trabajando con React, pero la manera en la que se manipula el DOM con Angular me parece facilisimo 😅

Diego Jurado

student•

Tiene que ser toda esa experiencia acumulada!

Viviana Luque

student•

Al realizar el ejemplo no me funciono el manejo de los botones tal vez les puede servir realizar ctrl + shift +R y refrescar la cache del navegador. Asi funciono me el ejemplo. Espero les sirva.

Fernando Molano Castrillón

student•

Yo lo que hice fue crear 2 botones, uno para aumentar y otro para reducir el valor de la edad. Ambos botones llaman a la misma función, updateAge() la diferencia es el valor que envían como parámetro. Uno envía un -1 y el otro envía 1.

<button (click)="updateAge(-1)">Decrease</button>
<progress max="100" [value]="person.age"></progress>
<button (click)="updateAge(1)">Increase</button>
<p>Age: {{ person.age }}</p>

Luego la función lo único que hace es actualizar la edad:

updateAge(value: number) {
    this.person.age = this.person.age + value;
  }

No solamente la barra de progreso se actualizara gracias al binding sino también el valor dentro de la etiqueta <p>.

LUIS MIGUEL OLARTE BELLO

student•

Tengo una duda existencial, ¿el profesor explica demasiadamente bien? o a angular le meten mucho terror, porque de verdad que me ha parecido muy fácil, pues hasta ahora, la forma de implementar todo es muy rápida.

Sergio Romo Medina

student•

Event binding es una característica de Angular que permite vincular eventos del lado del cliente, como clics de botón, movimientos del mouse o cambios de entrada, con métodos definidos en el componente de Angular.

El proceso de vinculación de eventos implica escuchar un evento específico en un elemento HTML y llamar a un método definido en el componente cuando ese evento se dispara. Esto permite que el componente responda de manera dinámica a las interacciones del usuario.

En Angular, el evento se vincula utilizando la sintaxis de corchetes y el nombre del evento deseado. Por ejemplo, si deseas vincular el evento de clic a un método llamado "handleClick" en tu componente, usarías la siguiente sintaxis:

<button (click)="handleClick()">Haz clic</button>

En este ejemplo, el evento de clic del botón se vincula al método "handleClick" en el componente. Cuando el botón se hace clic, se llama al método "handleClick" y se ejecuta el código asociado.

Además del evento de clic, Angular admite una variedad de otros eventos, como "keyup" (cuando se suelta una tecla), "mouseover" (cuando el mouse se mueve sobre un elemento) y "change" (cuando cambia el valor de un campo de entrada). Puedes vincular cualquier evento admitido por el elemento HTML correspondiente utilizando la misma sintaxis de corchetes.

Los métodos a los que se vinculan los eventos deben estar definidos en el componente de Angular correspondiente. Puedes definir estos métodos en el archivo TypeScript del componente y acceder a las propiedades y métodos del componente dentro de ellos.

En resumen, el evento binding en Angular permite vincular eventos del lado del cliente a métodos en el componente para responder dinámicamente a las interacciones del usuario. Esto proporciona una forma poderosa de crear interactividad en tus aplicaciones Angular.

Kevin Pizarro

student•

Hice un mini ejercicio que fue agregarle un boton para tambien disminuir la edad

toogleButton() {
    this.btnDisable = !this.btnDisable;
  }

  ageIncrease() {
    this.person.age += 1;
  }

  ageDecrease() {
    this.person.age -=1;
  }

<p>Edad {{ person.age}}</p>
<button (click)="ageIncrease()">Age ++</button>
<button (click)="ageDecrease()">Age --</button>

fredic yohany rojas

student•

Que maravilla. Vengo de Vue (2 y 3) y estoy maravillado. Que bendicioooooonnn!!!

Luis Fernando Forero Guzmán

student•

ok pero ahora tengo que conocer los eventos que tienen los controles del DOM :S Ahi vamos

Edwin Jesús

student•

Con una simple búsqueda se encuentran

Saul Vega Ramirez

student•

Si un método no retorna nada por defecto el tipo de retorno es void, similar a otros lenguajes como java o c#

Andrés Jiménez

student•

en java tienes que poner explícitamente el void.

Jonathan Osorio

student•

Me esta encantando este curso, muy buen profesor!!

Esteban Arteaga

student•

Aquí el ejercicio con un boton de reset para inicializar la edad en 0.

<export class AppComponent {
  name = 'Esteban';
  age = 25;
  img = "https://source.unsplash.com/random";
  btnDisabled = false;
  person = {
    name: "Esteban",
    age: 20,
    avatar: "https://source.unsplash.com/random",
  }

  toggleButton()
  {
    this.btnDisabled = !this.btnDisabled;
  }

  increaseAge()
  {
    this.person.age +=1;
  }

  resetAge()
  {
    this.person.age = 0;
  }
}
>

Juan Carlos Ortiz Romero

student•

Para vincular un elemento html a un evento, debemos indicar el nombre del evento entre paréntesis a la izquierda de un signo igual y el nombre de una funcion entre comillas a la derecha, recuerda indicar que se trata de una funcion con los parentecis “nameFunction()” . <button (click)="onSave()">Save</button> Usar () en el template html es sinonimo de llamar “addEventListener()” Podemos realizar eventos personalizados con “EventEmitter” Podemos llamar multiples eventos de la siguiente forma <button (click)="clickEvent()" (mouseenter)="mouseEnterEvent()">Click Me</button> Podemos determinar un objetivo de evento de la siguiente manera <button (click)="handleClick($event)">Save</button> Se recomienda comprender el flujo de datos de la aplicacion y como este interactua con la misma, existen tres tipos de enlaces: Enlace unidireccional [] para enlazar desde la capa logica (component.ts) a la vista (html). Enlace unidireccional () para enlazar de la vista (html) a la capa logica (component.ts). Enlace bidireccional [()] para enlazar una secuencia de vista bidireccional a la capa logica (component.ts).

ANDRES ALFONSO MIRA MEJIA

student•

✅

Diana Yuritzi Ramirez Calixto

student•

Para enlazar a un evento, se utiliza la sintaxis de enlace de evento angular. Esta sintaxis consiste en un nombre de evento de destino entre paréntesis a la izquierda de un signo igual y una instrucción de plantilla entrecomillada a la derecha.

Elmer Isai Solis Coyoy

student•

a diferencia que lo que dicen angular esta muy bien pensaba que iba hacer mas dificil

William Andres Aguilar Rodriguez

student•

Aumentando y disminuyendo la edad

Html

<p>age {{person.age}}</p>
<button (click)="increaseAge()">Age ++</button>
<button (click)="decreaseAge()">Age --</button>

increaseAge(){
    this.person.age += 1;
  }

  decreaseAge(){
    this.person.age -= 1;
  }

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  name:string="Danny";
  age:number=22;
  img:string='https://source.unsplash.com/random';
  btnState:boolean=true;

  person={
    name:"Pedro",
    age:22,
    avatar:'https://source.unsplash.com/random'
  }

  toggleButton(){
    this.btnState=!this.btnState;
  }

  addAge(){
    if(this.person.age<101){
      this.person.age++;
    }

  }

  restAge(){
    if(this.person.age>0){
      this.person.age--;

    }

  }
}

<h2>Eventos</h2>
<button [disabled]="btnState">Enviar</button>
<button (click)="toggleButton()">Toggle Button</button>
<p>edad {{person.age}} </p>
<button (click)="addAge()" >Add age</button>
<button (click)="restAge()" >Rest age</button>
<h2>Propiedades</h2>
<button [disabled]="btnState" >Enviar</button>
<input type="text" [value]="person.name">
<progress max="100" [value]="person.age"></progress>
<img [src]="person.avatar" width="100px" height="100px" alt="random image">
<h2>HOLA mundo</h2>
<h3>{{'hola mundo'.repeat(5)}} </h3>
<p>3+3={{3+3}}</p>
<h4>Soy {{name}}, y tengo {{age}}</h4>
<img src={{img}} width="100px" height="100px" alt="random image">

<export class AppComponent {
  name = 'Esteban';
  age = 25;
  img = "https://source.unsplash.com/random";
  btnDisabled = false;
  person = {
    name: "Esteban",
    age: 20,
    avatar: "https://source.unsplash.com/random",
  }

  toggleButton()
  {
    this.btnDisabled = !this.btnDisabled;
  }

  increaseAge()
  {
    this.person.age +=1;
  }

  resetAge()
  {
    this.person.age = 0;
  }
}
> 

Introducción al Event Binding de Angular

Primeros pasos

Qué es Angular: ventajas y cómo aprenderlo

Instalación de Angular CLI

Comandos de Angular para correr tu proyecto

Estructura de un proyecto en Angular

Conceptos básicos de TypeScript para usar Angular

Comunicación de datos

String interpolation

Property Binding