A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Otros eventos que puedes escuchar

9/21
Recursos

Además del evento clic, seguramente el más utilizado, hay otros eventos como el change para detectar cambios en un campo de formulario, el evento scroll para detectar el desplazamiento horizontal/vertical del usuario en el navegador, onKeyUp o onKeyDown para detectar cuando el usuario aprieta o deja de apretar un botón de su teclado.

La importancia del Event Binding en Angular está dada por la posibilidad de comunicar el componente y la vista, el código TS con el código HTML, intercambiando datos entre ellos.

Puedes enviarle al controlador el evento completo que se produce en la vista. Para esto, solo declara un parámetro $event en el método que se encuentra escuchando el evento.

Tienes en el controlador:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  buttonClick($event: Event) {
    console.log($event);
  }
}

Y en el HTML:

<button (onKeyUp)="buttonClick($event)">

El método buttonClick() que recibe como parámetro $event del tipo Event, en el HTML bindea el evento onKeyUp y el método recibe argumento $event con el símbolo de pesos delante para que Angular entienda que se trata de un evento.

De esta manera, puedes registrar cada pulsación del teclado imprimiendo por consola el evento producido por el usuario.

Aporte creado por: Kevin Fiorentino.

Aportes 11

Preguntas 6

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Otros eventos que puedes escuchar

  • Una forma com√ļn de manejar eventos es pasar el ‚Äúobjeto de evento‚ÄĚ $event, donde se capturan eleentos del DOM, por lo general este evento contiene la informacion que debemos procesar en el metodo.

  • Conviene conocer los objetos del evento DOM Event reference

  • Tenga en cuenta el contexto de ejecuci√≥n

  • Las propiedades de un $event (objeto) var√≠an seg√ļn el tipo de evento DOM. Por ejemplo, un evento de mouse incluye informaci√≥n diferente a la de un evento de edici√≥n de cuadro de entrada.

  • Podemos escuchar el scroll con el siguiente codigo

      //en el html
      <div class="box" (scroll)="onScroll($event)"></div>
      // en la capa logica
      onScroll(event: Event) {
        const element = event.target as HTMLElement;
        console.log(element.scrollTop);
      }
    
  • Podemos leer las teclas que se estan digitando a medida que estas son digitadas, esto lo hacemos con el sigiente codigo

      // en el html
      <input type="text" [value]="person.name" (keyup)="onKeyUp($event)" />
      <p>Name {{ person.name }}</p>
      // en la capa logica
      onKeyUp(event: Event) {
      const element = event.target as HTMLInputElement;
      this.person.name = element.value;
      }
    
  • Use un tipo de datos espesifico (no any) que pueda revelar las propiedades del objeto asociado al evento

      // sin informacion de tipo ... simplifica el código al costo de no saber las propiedades del evento
      onK(event: any) {
        this.values += event.target.value + ' | ';
      }
      // define un tipo de dato para el evento que estamos capturando, lo que nos permite utilizar las propiedades adecuadas para el objeto
      onKey(event: KeyboardEvent) {
      this.values += (event.target as HTMLInputElement).value + ' | ';
      }
      // No todos los elementos tienen una value propiedad, por lo que se convierte target en un elemento de entrada. El método onKey expresa más claramente lo que espera y cómo debera interpretar el evento.
    
  • Tambien puedes capturar teclas como Ctr, Alt, Shift y sus conbinaciones

      <input (keyup.control)='...respond to ctrl/control...' />
      <input (keyup.alt)='...respond to alt/option...' />
      <input (keyup.shift)='...respond to shift...' />
      <input (keyup.meta)='...respond to command...' />
      <input (keydown.control.shift.z)='...'/>
      <input (keyup.enter)='...responds to enter...' />
      <input (keydown.esc)='...responds to escape...' />
      <input (keyup.shift.f)='...responds to shift+f...' />
    
  • Al utilizar el ‚Äú$event‚ÄĚ tenga en cuenta que este muestra mas infomacion de la necesaria, lo que rompe ‚Äúla separacion de responsabilidaes‚ÄĚ entre la plantilla ( lo que ve el usuario ) y el componente ( c√≥mo la aplicaci√≥n procesa los datos del usuario ), es mejor usar variables de referencia en la capa logica (componente) para abordar este problema.

Si no les aparece la barrita de scroll en su div pueden cambiar el valor de la propiedad de overflow a scroll en vez de auto o utilizar overflow-y con valor scroll.

.box{
    height: 200px;
    width: 200px;
    overflow-y: scroll;
    background-color: darksalmon;
}

Si no te funciona, mira el archivo de preprocesador css que est√°n utilizando, en este caso, la sint√°xis para sass es esta:

.box
  height:200px
  width:200px
  overflow: auto
  background: red

Es importante los espacios en blanco despues de overflow y background, yo descargué el complemento Sass.

Una forma com√ļn de manejar eventos es pasar el ‚Äúobjeto de evento‚ÄĚ $event, donde se capturan eleentos del DOM, por lo general este evento contiene la informacion que debemos procesar en el metodo.
Conviene conocer los objetos del evento DOM Event reference
Tenga en cuenta el contexto de ejecución

En visual Studio Code con Alt + Z puedes hacer que desaparezca el scroll horizontal y ver todo tu código mejor.

lista de eventos para leer teclas en ANGULAR

Las propiedades de un $event (objeto) var√≠an seg√ļn el tipo de evento DOM. Por ejemplo, un evento de mouse incluye informaci√≥n diferente a la de un evento de edici√≥n de cuadro de entrada.

Hasta este punto de la clase me parece muy interesante, pero tambien se requiere pr√°ctica y conocimiento de todo los eventos para poder invocarlos. Al ejecutar en el navegador no me carga completo los procesos que estoy realizando seg√ļn la clase. ūüė© ūü•ļ a seguir investigando. #NuncaParesDeAprenderūüíö ūüöÄ

Evento on scroll

EVENT BINDING (event)

(click)="onSave()"

El evento entre parentesis y la función.