Introducción al Event Binding de Angular

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

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

<h1>Eventos</h1>
<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>
<h1>Propiedades</h1>
<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">
<h1>HOLA mundo</h1>
<h2>{{'hola mundo'.repeat(5)}} </h2>
<p>3+3={{3+3}}</p>
<h3>Soy {{name}}, y tengo {{age}}</h3>
<img src={{img}} width="100px" height="100px" alt="random image">

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 😅

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>

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

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

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;
  }

Angular tiene una fama un poco pésima, pero la verdad me esta gustando mucho, o no se si será el profe que explica muy bien

Event Binding

El Event Binding en Angular es una técnica para enlazar un evento en un elemento de la vista con un método en un componente.

• Con Event Binding, puedes ejecutar código en un componente cuando se produce un evento en la vista, como un clic en un botón o un cambio en un input.

El Event Binding se realiza usando paréntesis () alrededor del nombre del evento en la vista, y el método que se ejecutará en el componente se especifica dentro de los paréntesis.

Por ejemplo, si quieres ejecutar un método saludar en un componente cuando se hace clic en un botón, puedes hacer lo siguiente:

<button (click)="saludar()">Hola</button>

En este ejemplo, estamos enlazando el evento click del botón con el método saludar en el componente. Cada vez que se hace clic en el botón, se ejecutará el método saludar en el componente.

🤯 Algunos Trucos del Event Binding

Pasa parámetros a un método enlazado

Puedes pasar parámetros adicionales a un método enlazado mediante Event Binding. Por ejemplo, si quieres pasar el texto de un botón a un método cuando se hace clic en el botón, puedes hacer lo siguiente:

<button (click)="saludar(textoBoton)">{{textoBoton}}</button>

Usa la tecla $event para acceder a los detalles del evento:

El objeto $event se pasa automáticamente al método enlazado cuando se produce un evento. Puedes usar $event para acceder a los detalles del evento y realizar acciones en consecuencia. Por ejemplo, si quieres acceder al valor de un input cuando se produce un evento input, puedes hacer lo siguiente:

<input (input)="actualizarValor($event)">

Enlaza eventos de teclado:

Además de los eventos de clic y entradas, también puedes enlazar eventos de teclado como keyup
y keydown. Esto es útil para responder a acciones del teclado en la vista.

Usa una expresión ternaria para controlar la ejecución de un método enlazado:

Puedes usar una expresión ternaria para controlar si se ejecutará o no un método enlazado en función de una condición. Por ejemplo, si quieres ejecutar un método solo si una propiedad booleana es verdadera, puedes hacer lo siguiente:

<button (click)="puedeSaludar ? saludar() : null">Hola</button>

Cositas extra para esta clase:

<h1>Eventos</h1>
<button [disabled]="btnDisabled">Enviar</button>
<button (click)="toggleButton()">{{ btnText }} button</button>

<div>
  <p>Edad: {{ person.age }}</p>
  <button (click)="incrementAge()">Age ++</button>
  <button (click)="decrementAge()">Age --</button>
</div>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  btnDisabled: boolean = true;
  progressBar: number = 50;
  btnText = 'Enable';

  person = {
    name: 'Mike',
    age: 24,
    urlImage: 'https://source.unsplash.com/random',
  }

  toggleButton() {
    this.btnDisabled === true ? this.btnText = 'Disable' : this.btnText = 'Enable';

    this.btnDisabled = !this.btnDisabled;
  }

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

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

pero que belleza!

INTRODUCCION AL EVENT BINDING DE ANGULAR

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).

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:

  1 - Enlace unidireccional [] para enlazar desde la capa logica (component.ts) a la vista (html).
  2 - Enlace unidireccional () para enlazar de la vista (html) a la capa logica (component.ts).
  3 - Enlace bidireccional [()] para enlazar una secuencia de vista bidireccional a la capa logica (component.ts).

Aca esta el evento de esta clase.

En el HTML
<h1>Eventos</h1>
<button [disabled] =“btnDisabled”>Enviar</button>
<button (click)=“ToggleButton()”>Toggle Button</button>
<p>Edad {{person.age}}</p>
<button (click)=“AgeButtonEvent()”>Age++</button>
<hr/>

En TS
ToggleButton() {
this.btnDisabled = !this.btnDisabled;
}

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

El property Binding tambien funciona con expresiones. En combinacion con Event Binding lo probe a modo de pantalla de edicion con botones (nuevo, editar, etc) y una propiedad modoEdicion que en los botones de acciones se deshabilitaba con esa propiedad pero en los botones de grabar / cancelar lo hacia por la negacion :

<button (click)="DesactivarEdicion()" [disabled]="!modoEdicion">Grabar</button>

de ese modo con una sola propiedad se activaban o desactivaban un conjunto de botones.

Realicé esta adición al método… en el que debido a que la barra(progress) tiene un máximo de 100! entonces cuando se i ncremente y pase el numero 100 me envía una alerta que no permite seguir incrementando y devuelve el valor a 100
incAge(){
this.person.age += 1;
if(this.person.age>100){
alert(‘Edad fuera del rango’);
this.person.age -=1
}
}
}

Brutal una clase realmente interesante.

Esta función activa o desactiva el boton 😉
toogleButton() {
this.btnDisabled ? this.btnDisabled=false:this.btnDisabled=true;
}