Otros eventos que puedes escuchar
Contenido del curso
Otros eventos que puedes escuchar
Contenido del curso
Victor Manuel Franco Cañon
Omar Villada
Jonathan Gonzalez Botero
Daniela Garcia
Christian Gabriel Espino Magaña
Carlos Alberto Vivas Reinoso
Danny Pacheco
Jonathan Sanchez
Julian Henao Henao
Daniel Buitrago
Edixon javier Pabon Lizcano
Juan Carlos Ortiz Romero
Kathleen M. Bucarito P.
Ana Guerrero
Gandhy David Amaya Medina
Jose Luis Barbosa Cepeda
Daniel Meza
German Pinilla
Daniel Camacho
Marco Antonio Alducin Garcia
Shirley Sanjuan Trespalacios
Michelle Osorio
Claudia by DesiTech
Marco David Romero
Jimmy Buriticá Londoño
Aaron Paredes Cabrera
Michelle Osorio
Daylen Pantoja Zaldívar
Zabdiel Flores Alvarado
Miguel Canchanya
Santiago Velandia Gallo
JAIME EDUARDO DIAZ TOBON
Marcos Joel Sánchez López
Fabricio Huaquisto Quispe
EDGAR MERCADO GARCIA
Juan Carlos Ortiz Romero
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.
Conceptos extraídos de:
Gran aporte, mil gracias
gracias victor que buen aporte las urls
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; }
Me funciono como bien comentas, utilizando overflow-y: scroll y en mi caso agregando más texto al elemento <p></p> ¡Gracias!
muy buen aporte, me sirvió, muchas gracias.
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.
Gracias compa eso me salvo.
Muchas gracias Danny
En visual Studio Code con Alt + Z puedes hacer que desaparezca el scroll horizontal y ver todo tu código mejor.
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
El evento de onScroll no me funcionó. Copié todo igual. ¿Alguna sugerencia?
Es difícil sin ver tu código porque es básicamente adivinar, pero te recomiendo revisar que el evento scroll esté todo en minúscula (scroll)="onScroll($event)". Si capitalizas la primera letra, por ejemplo, no te va a funcionar (Scroll)="onScroll($event)".
Si no es eso, te invito a compartir tu código para tener más información y poder ayudarte de forma más efectiva.
no entendi del todo lo de ponerle al event.target "as HTMLElement"
le indicas a Angular que lo trate como un HTMLElement. Así te dará propiedades y funciones con las cuales poder trabajar al colocar un . después de la variable que tiene la referencia del event.target
++OTROS EVENTOS QUE PUEDES ESCUCHAR++
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.
No se si el elemento <button> recibe, como evento onKeyUp
Hoy me puse a practicar algunos otros eventos que quisas pudieran funcionarles:
Para sass me funciono asi: .box height:200px width:200px overflow-y: scroll background: red
En Angular, puedes utilizar eventos para reaccionar a diferentes acciones del usuario en la interfaz de usuario de tu aplicación. Algunos ejemplos de eventos comunes que puedes utilizar en Angular son:
Clicks del ratón: puedes utilizar eventos como "click" o "dblclick" para detectar cuando el usuario hace clic en un elemento de la interfaz de usuario. Cambios en un formulario: puedes utilizar eventos como "input" o "change" para detectar cuando el usuario introduce o modifica información en un formulario. Arrastrar y soltar: puedes utilizar eventos como "drag" o "drop" para permitir al usuario arrastrar y soltar elementos en la interfaz de usuario. Movimiento del ratón: puedes utilizar eventos como "mouseenter" o "mouseleave" para detectar cuando el usuario mueve el ratón sobre un elemento. En Angular, puedes utilizar eventos de diferentes maneras, como a través de la directiva "ng-event" o utilizando el enlace de eventos con el símbolo "@". Por ejemplo, si quieres ejecutar una función llamada "miFuncion" cuando el usuario haga clic en un botón, puedes utilizar el siguiente código:
<button (click)="miFuncion()">Haz clic aquí</button>
En este caso, se está utilizando el enlace de eventos para asociar el evento "click" del botón con la función "miFuncion". Cada vez que el usuario haga clic en el botón, se ejecutará la función "miFuncion".
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💚 🚀
En mi caso deje un parentesis al final y no me cargaba toda la pagina:
<div class="box" (scroll)="onScroll($event)")>
Hola Claudia, te recomiendo bajar los archivos del GitHub que están en las notas de la clase, así lo hice y todo funciona perfectamente.
EVENT BINDING (event)
(click)="onSave()"
El evento entre parentesis y la función.
"event:Event" es una declaración de parámetro de función en TypeScript que indica que la función espera recibir un objeto de evento como argumento.
En el contexto de Angular, los eventos son objetos que representan acciones del usuario en la interfaz de usuario, como hacer clic en un botón o introducir información en un formulario. Al declarar un parámetro de función como "event:Event", estás indicando que la función espera recibir un objeto de evento y que puedes acceder a sus propiedades y métodos para obtener información sobre el evento y reaccionar en consecuencia.
Por ejemplo, en el código que proporcionaste:
onScroll(event: Event) { const element = event.target as HTMLElement; console.log(element.scrollTop); }
La función "onScroll" espera recibir un objeto de evento como argumento. Luego, se está utilizando la propiedad "target" del objeto de evento para obtener el elemento HTML que disparó el evento y la propiedad "scrollTop" para obtener la posición actual del scroll.
Es importante tener en cuenta que el objeto de evento puede tener diferentes propiedades y métodos dependiendo del tipo de evento que se esté manejando. Por lo tanto, es importante leer la documentación de Angular o consultar la API de eventos de HTML para conocer qué propiedades y métodos están disponibles para cada tipo de evento.
Hola gracias por tu aporte!! Fue de gran ayuda.
Gracias por tu explicación, ha sido muy útil
Considerar la siguiente sintaxis para el archivo .sass (css) Sin corchetes { } y sin ; al final de cada linea.
Si es muy poco texto usar un valor menor para height (o mas texto), si no aparece el scroll colocar “overflow: scroll”.
.box height: 100px width: 200px overflow: scroll background: red
como se puede hacer para borrar el contenido del input cuando presione enter o cuando presione un boton?
yo lo haría asi
changeName(event: KeyboardEvent) { const element = event.target as HTMLInputElement; this.name2 = element.value; if (event.key == "Enter") element.value = ""; }
en mi caso tengo el evento onScroll pero me esta marcando el error en el target y me indica lo siguiente: La propiedad 'target' no existe en el tipo 'Event_2'. La propiedad 'target' no existe en el tipo 'RouterEvent'.ts en mi componnente .TS y luego en mi html me indica lo siguiente Argument of type 'Event' is not assignable to parameter of type 'Event_2'. Type 'Event' is missing the following properties from type 'NavigationError': error, id, urlngtsc(2345) app.component.ts(4, 30): Error occurs in the template of component AppComponent.
hola amigo te recomiendo que guardes esas partes del codigo e instales angular denuevo junto a tu version de node JS en mi caso estoy usando node 18.12.1
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.
