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.
Obed Paz
nada mal Angular. No es tan feo como lo pintan 🤔 me esta gustando de hechoi
Andrés Jiménez
es que creo que Nicolas lo explica muy bien, se ve muy sencillo. Muy buen curso.
Erick Saravia
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
Enmanuel Josue Sarmiento Benitez
Excelente, gracias
Anfernee Valera
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
Tiene que ser toda esa experiencia acumulada!
Viviana Luque
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
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
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
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
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>
){kind=small}
fredic yohany rojas
Que maravilla. Vengo de Vue (2 y 3) y estoy maravillado. Que bendicioooooonnn!!!
Luis Fernando Forero Guzmán
ok pero ahora tengo que conocer los eventos que tienen los controles del DOM :S Ahi vamos
Edwin Jesús
Con una simple búsqueda se encuentran
Saul Vega Ramirez
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
en java tienes que poner explícitamente el void.
Jonathan Osorio
Me esta encantando este curso, muy buen profesor!!
Esteban Arteaga
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
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
✅
Diana Yuritzi Ramirez Calixto
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
a diferencia que lo que dicen angular esta muy bien pensaba que iba hacer mas dificil
William Andres Aguilar Rodriguez
Aumentando y disminuyendo la edad
Html
<p>age {{person.age}}</p> <button (click)="increaseAge()">Age ++</button> <button (click)="decreaseAge()">Age --</button>
ts
increaseAge(){ this.person.age += 1; } decreaseAge(){ this.person.age -= 1; }
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">
