Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Introducción al Event Binding de Angular

8/21
Recursos

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.

Aportes 11

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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

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>

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">

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

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

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

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

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

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

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.

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