Otros eventos que puedes escuchar

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:
  • https://developer.mozilla.org/en-US/docs/Web/Events
  • https://angular.io/guide/event-binding-concepts
  • https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
  • https://www.w3schools.com/angular/angular_events.asp
  • https://angular.io/guide/user-input
  • https://angular.io/guide/template-reference-variables

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 “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

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

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💚 🚀

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.

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.

✅

me estas diciendo que todo es reactivo queeeeee

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 “desbordamiento” o “overflow” 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 “overflow: 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