No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Otros eventos que puedes escuchar

9/22
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 22

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Otros eventos que puedes escuchar

  • Una forma com煤n de manejar eventos es pasar el 鈥渙bjeto 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 鈥渓a 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.

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 鈥渙bjeto 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

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.

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

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馃挌 馃殌

EVENT BINDING (event)

(click)="onSave()"

El evento entre parentesis y la funci贸n.

鈥渆vent: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 鈥渆vent: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 鈥渙nScroll鈥 espera recibir un objeto de evento como argumento. Luego, se est谩 utilizando la propiedad 鈥渢arget鈥 del objeto de evento para obtener el elemento HTML que dispar贸 el evento y la propiedad 鈥渟crollTop鈥 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.

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 鈥渃lick鈥 o 鈥渄blclick鈥 para detectar cuando el usuario hace clic en un elemento de la interfaz de usuario.
Cambios en un formulario: puedes utilizar eventos como 鈥渋nput鈥 o 鈥渃hange鈥 para detectar cuando el usuario introduce o modifica informaci贸n en un formulario.
Arrastrar y soltar: puedes utilizar eventos como 鈥渄rag鈥 o 鈥渄rop鈥 para permitir al usuario arrastrar y soltar elementos en la interfaz de usuario.
Movimiento del rat贸n: puedes utilizar eventos como 鈥渕ouseenter鈥 o 鈥渕ouseleave鈥 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 鈥渘g-event鈥 o utilizando el enlace de eventos con el s铆mbolo 鈥淍鈥. Por ejemplo, si quieres ejecutar una funci贸n llamada 鈥渕iFuncion鈥 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 鈥渃lick鈥 del bot贸n con la funci贸n 鈥渕iFuncion鈥. Cada vez que el usuario haga clic en el bot贸n, se ejecutar谩 la funci贸n 鈥渕iFuncion鈥.

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.

No me estaba mostrando el scroll y ten铆a mismo c贸digo proporcionado de la clase, para solucionar esto se necesitan un lorem que proporcione un texto m谩s largo o simplemente en el estilo darle un height con menos px por ejemplo el que utilice fue uno de 80px

Un link de los aportes est谩 dirigiendo a una p谩gina no segura

Overflow es como se maneja el contenido que desborda el contenedor de un elemento HTML. Si el contenido de un elemento es m谩s grande que el espacio disponible en el contenedor, se produce un 鈥渄esbordamiento鈥 o 鈥渙verflow鈥 de ese contenido.

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 鈥渙verflow: scroll鈥.

.box
height: 100px
width: 200px
overflow: scroll
background: red

Es maravilloso

En caso que no te aparezca el scroll en el div, modificar el valor del atributo overflow a scroll.

.box  {
  height: 200px;
  width: 200px;
  overflow: scroll;
  background: red;
}

Evento on scroll