Introducción al Event Binding de Angular
Clase 8 de 21 • Curso de Fundamentos de Angular
Contenido del curso
Kevin Zavala
student•
hace 5 años
Clase 8 de 21 • Curso de Fundamentos de Angular
Contenido del curso
Kevin Zavala
Obed Paz
Andrés Jiménez
Erick Saravia
Danny Pacheco
Enmanuel Josue Sarmiento Benitez
Juan Carlos Ortiz Romero
Anfernee Valera
Diego Jurado
Viviana Luque
Fernando Molano Castrillón
LUIS MIGUEL OLARTE BELLO
Sergio Romo Medina
Kevin Pizarro
fredic yohany rojas
Luis Fernando Forero Guzmán
Edwin Jesús
Saul Vega Ramirez
Andrés Jiménez
Jonathan Osorio
Esteban Arteaga
Juan Carlos Ortiz Romero
ANDRES ALFONSO MIRA MEJIA
Diana Yuritzi Ramirez Calixto
Elmer Isai Solis Coyoy
William Andres Aguilar Rodriguez
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>
nada mal Angular. No es tan feo como lo pintan 🤔 me esta gustando de hechoi
es que creo que Nicolas lo explica muy bien, se ve muy sencillo. Muy buen curso.
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
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">
Excelente, gracias
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).
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 😅
Tiene que ser toda esa experiencia acumulada!
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.
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>.
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.
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.
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}
Que maravilla. Vengo de Vue (2 y 3) y estoy maravillado. Que bendicioooooonnn!!!
ok pero ahora tengo que conocer los eventos que tienen los controles del DOM :S Ahi vamos
Con una simple búsqueda se encuentran
Si un método no retorna nada por defecto el tipo de retorno es void, similar a otros lenguajes como java o c#
en java tienes que poner explícitamente el void.
Me esta encantando este curso, muy buen profesor!!
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; } } >
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).
✅
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.
a diferencia que lo que dicen angular esta muy bien pensaba que iba hacer mas dificil
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; }