Event Binding: click y doble click

Curso de Angular 17: Creación de Aplicaciones Web

Introducción a Angular y Fundamentos

Aprende Angular 17

Creando tu primer proyecto en Angular

Implementando estilos

Mostrando elementos

Property Binding en Angular

Event Binding: click y doble click

Event binding: keydown

Modelo de reactividad con Signals

Creando un Signal en Angular

Estructuras de control en Angular

Directivas de control

Uso de ngFor

ngFor para objetos

Update Tasks

Uso de ngIf

Uso de ngSwitch y ngSwitchDefault

Controlando un input

Manejo de formularios en Angular

Alistando tu aplicación para producción

Estilos al modo Angular

Clases en Angular

Editing mode

Estados compuestos con computed

Usando effect para localStorage

Uso de ngbuild

Despliegue con Firebase Hosting

Nueva sintaxis en Angular

Directivas @For, @switch

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicación

Construyendo un e-commerce en Angular

Componentes en Angular

Mostrando los componentes

Angular DevTools

Uso de Inputs en Angular

Uso de Outputs en Angular

Componentes para Producto

Ciclo de vida de los componentes

Ciclo de vida de componentes

Ciclo de vida de componentes: ngOnChanges

Ciclo de vida de componentes: ngOnInit

Detectando cambios en los inputs

Evitando memory leaks con ngDestroy

Audio player con ngAfterViewInit

Creando la página "about us" o "conócenos"

Mejorando la interfaz del producto

Creando componente de productos

Creando el Header

Creando el carrito de compras

Comunicación padre e hijo

Calculando el total con ngOnChanges

El problema del prop drilling

Reactividad con signals en servicios

Entendiendo la inyección de dependencias

Integración y Datos

Obteniendo datos una REST API

Importaciones cortas en Typescript

Pipes en Angular

Construyendo tu propio pipe

Utilizando librerías de JavaScript en Angular

Conociendo las directivas

Deployando un proyecto en Vercel

Enrutamiento y Navegación

Ruta 404

Uso del RouterLink

Vistas anidadas

Uso del RouterLinkActive

Detalle de cada producto

Obteniendo datos del producto

Galería de imagenes

Detalle de la galería

Perfeccionando tu e-commerce

Mostrando categorias desde la API

Url Params

LazyLoading y Code Splitting

Aplicando LazyLoading

Prefetching

Usando la nueva sintaxis de Angular 17

Lanzando tu aplicación a producción

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 13

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

ANDRES ALFONSO MIRA MEJIA

hace un año

Event Binding
.
Permite controlar los eventos que suceden en estos elementos. Por ejemplo, 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.
.
Ejemplo, 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()" >

Luis Angel Castillo Vega

hace un año

Mejoro muchisomo este curso, en el anterior recuerdo que me confundio mucho la parte de Event binding.

Brandon Lee Aguero Fernandez

hace un año

Para detectar los cambios de un input de tipo number y mostrarlo en tiempo real en nuestro html

<input type="text" (change)="changeTextInput($event)" />
<p>I'm the input content => {{ valueInput }}</p>

valueInput = '';

changeTextInput(event: Event) {
  const elementInput = event.target as HTMLInputElement;
  this.valueInput = elementInput.value;
}

Ricardo Rey

hace 8 meses

**Event binding** te permite escuchar y responder las acciones del usuario, como pulsaciones de teclas, movimientos del ratón, clics y toques. 1. **click**: Se activa cuando se hace clic en un elemento. Por ejemplo:`<button (click)="onSave()">Guardar</button>` 2. **dblclick**: Se activa cuando se hace doble clic en un elemento. Por ejemplo:`

Haz doble clic aquí

` 3. **input**: Se activa cuando se introduce texto en un campo de entrada (como un `input` o `textarea`). Útil para detectar cambios en el contenido.`<input (input)="onInput($event.target.value)" />` 4. **change**: Se activa cuando cambia el valor de un elemento de entrada (por ejemplo, un `select`).`<select (change)="onSelectionChange($event.target.value)">` ` <option value="option1">Opción 1</option>` ` <option value="option2">Opción 2</option>` `</select>` 5. **keydown**: Se activa cuando se presiona una tecla. Puedes especificar la tecla o el código que deseas enlazar. Por ejemplo:`<input (keydown.enter)="onKeydown($event)" />` 6. **keyup**: Similar a `keydown`, pero se activa cuando se suelta una tecla. 7. **mouseover**: Se activa cuando el puntero del ratón entra en un elemento. 8. **mouseout**: Similar a `mouseover`, pero se activa cuando el puntero del ratón sale de un elemento. 9. **mouseleave**: Se activa cuando el puntero del ratón sale de un elemento. Similar a `mouseout`, pero no se propaga a los elementos secundarios. `

El ratón se fue

` 10. **focus**: Se activa cuando un elemento obtiene el foco. 11. **blur**: Similar a `focus`, pero se activa cuando un elemento pierde el foco. Esta es la [documentación oficial de Angular](https://angular.io/guide/event-binding) para obtener más detalles sobre Event Binding

Felipe Aguilar

hace 10 meses

Existe alguna arquitectura donde se tenga separados los eventos de las variables en la class component? Me lo pregunto porque en proyectos grandes, este file de "labs.components.ts" estaria violando el Single Reponsability principle de SOLID, o existe alguna explicacion? Gracias muy buen curso

Duvan Mauricio Rodriguez Penagos

hace 3 meses

por si a alguien le sirve el evento change no tiene la funcionalidad esperada en un input tipo text, se debe usar el evento input \<input type="text" (input)="changeHandler($event)">

Karen Lorena Barrera Paez

hace 8 meses

Tengo una pregunta un poco boba, jeje por que dice "lógica de negocio" es la lógica de la función no?

Jose Luis Bedoya

hace 10 días

es muy interesante que en angular no haya que mandar los metodo como función flecha. si creas un metodo de esta forma en React, sin la función flecha, se ejecutará apenas el usuario entre a la página

Alexander Flores Rayme

hace 4 meses

eventos

Marco Antonio Alducin Garcia

hace 5 meses

Aqui les puedo comentar, sin ver la siguiente clase sobre Event Binding, que si quisieran observar el cambio en el input, pueden hacer lo siguiente: ```js changeName(event: Event){ const element = event.target as HTMLInputElement; this.person.name = element.value; } ```Este código lo rescato del curso anterior de Angular. Espero les sirva

Felipe Naranjo

hace 8 meses

![](https://static.platzi.com/media/user_upload/image-2f11d55a-58dc-4a28-a597-79095752f054.jpg) input chandler

Josué Eliezer Gómez Soto

hace un año

a alguien le fallo el evento doble click? ... a mi no me funciona... me dicen is es particular a mi o tambien les pasa a ustedes

Emanuel Alvarado Godinez

hace un año

El warning de \*ngFor es por que tenemos que importar CommonModule de @angular/common y añadirlo a los imports de nuestro componente ```js import { Component } from '@angular/core';import { CommonModule } from '@angular/common'; @Component({ selector: 'app-labs', standalone: true, imports: \[CommonModule], templateUrl: './labs.component.html', styleUrl: './labs.component.css',}) ```