Event Binding: click y doble click

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

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

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

**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:`` 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. `` 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

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

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

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

De momento estoy disfrutando el curso :)

El Event Binding en Angular es el mecanismo que permite escuchar y responder a eventos del DOM, como clics o entradas de texto. Se utiliza paréntesis en el template para adjuntar un evento a un elemento, asignando una función que se ejecutará cuando ocurra el evento. Por ejemplo, `<button (click)="miFuncion()">Click me</button>` ejecutará `miFuncion()` al hacer clic en el botón. Este enfoque facilita la interacción entre la lógica del componente y la interfaz de usuario, promoviendo un desarrollo más dinámico.

💻Resúmen de la clase:                                🚩REPOSITORIO EN GITHUB <https://github.com/raulsr92/CursoAngular17-Platzi>

Event Binding en Angular se refiere al mecanismo que permite a los desarrolladores manejar eventos del navegador, como clicks o cambios en inputs. Se utiliza la sintaxis de paréntesis `()` para escuchar eventos en elementos HTML, asignando una función a ejecutar cuando el evento ocurre. Por ejemplo, en un botón con `(click)="miFuncion()"`, la función `miFuncion()` se ejecutará cada vez que se haga clic en el botón. Este enfoque permite una interacción dinámica y reactiva en las aplicaciones web construidas con Angular.

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

eventos

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

 input chandler

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

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',}) ```